winjs/winstrap

button submit with search glyphe pulling off if < 540px

englishextra opened this issue · 1 comments

Resize the window on http://winstrap.azurewebsites.net/controls.html#navs

and watch out the search input with glyphed submit button

This is what I had to do:

.navbar-global .navbar-form{margin-top:10px;margin-bottom:0px;padding:0 10px 0 10px;}
.navbar-global .navbar-form .form-group{width:50%;}
.navbar-local .navbar-form{margin-bottom:0;padding:12px 10px 0 10px;}
.navbar-local .navbar-form .form-group{width:50%;}
.navbar-global .navbar-form .form-group,.navbar-local .navbar-form .form-group{display:inline-block;}
@media (min-width: 540px) {
    .navbar-global .navbar-form{margin-top:6px;margin-bottom:1px;padding:0 10px 0 10px;}
    .navbar-global .navbar-form .form-group{width:auto;}
    .navbar-local .navbar-form{margin-bottom:0px;padding:12px 10px 6px 10px;}
    .navbar-local .navbar-form .form-group{width:auto;}
}
@media (min-width: 1084px) {
    .navbar-global .navbar-form{margin-top:6px;margin-bottom:6px;padding:0 10px 0 10px;}
    .navbar-local .navbar-form{position:relative;top:4px;margin-top:-6px;margin-bottom:0;padding:20px 10px;}
}

See changes here https://englishextra.github.io/libs/englishextra-app/index.html

The key change is

.form-group{display:inline-block;}

Have submitted a fix MS guys, but meanwhile download my version here
https://github.com/codefactorymx/winstrap/tree/master/dist/css