Angular Material: preventing layout resizing when select box value is selected
Using Angular Material: This is the behavior of the select box after input
selection After selection, the element gets an attribute , which causes the width to change.
text-size-adjust: 100%
You can check this with codepen http://codepen.io/anon/pen/JNOdKP?editors=1000
How can I prevent this behavior to maintain a fixed width?
Dirty fix adds too much bundling
in <div><div/>
just under the code </md-select>
(see the last example in the codepen )
source to share
A less messy solution can be installed
ng-class="{'md-select-fixed-width': true}"
when md-select-fixed-width: 140px;
so the selection looks like this:
<md-select name="startYear4"
ng-model="ctrl.year4"
md-no-cache="ctrl.noCache"
ng-class="{'md-select-fixed-width':true}"
required>
<md-option ng-repeat="year4 in [2017, 2016, 2015]" value={{year4}} ng-bind="year4">{{year4}}</md-option>
</md-select>
and css:
.md-select-fixed-width {
width: 140px;
}
See codepen
source to share