search

CreativeIT / getmdl-select

Select for material-design-lite
http://creativeit.github.io/getmdl-select/
MIT License
301 stars 87 forks source link

Width is 0px if component is not visible on page load #34

Closed garnold closed 8 years ago

garnold commented 8 years ago

We are using the getmdl-select component within tab panels. If the component is contained within the active tab panel on page load, all is well. However, if the component is contained within an inactive tab panel, the width of the component is 0px.

Interestingly enough, if I remove the defer attribute from the script element, the component works as expected in both active and inactive tab panels.

Example HTML attached.

getmdl-select-tabs.html.txt

franckevva commented 8 years ago

@garnold I caught your problem. This is because initially runs mdl script, then ours. By this time the second tab display: none, which is why select not be drawn. Now your problem is solved, but the width of the element will be constant. You can define the width with dynamic initialization like this getmdlSelect.init('#mySelect', 500);, where '500' is your width.

garnold commented 8 years ago

Works like a charm, thanks @franckevva !