CODEWITHSUNDEEP
htmlcssangularjsangular-material
pbaranski
pbaranski

Reputation: 25062

Angular Material: Prevent layout resizing when select box value is chosen

Using Angular Material: this is how the select box behaves after selecting input enter image description here
After choice element gets attribiute text-size-adjust: 100% what causing width change.

You can check this with codepen http://codepen.io/anon/pen/JNOdKP?editors=1000

How to prevent this behaviour to maintain fixed width?

Dirty fix is too add bunch of &nbsp; in <div><div/> just under </md-select> code (see last example in codepen)

Upvotes: 3

Views: 1823

Answers (1)

mwende
mwende

Reputation: 36

Less dirty solution might be setting ng-class="{'md-select-fixed-width': true}", when md-select-fixed-width: 140px;
so i.e. select will look like:

 <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 the codepen

Upvotes: 2

Related Questions