Geek Answers Handbook

JQuery Mobile displays a hidden selection element

See this select element with display:none . In jQuery Mobile, it displays despite this:

 <select id="dddd" name="dddd" data-mini="true" data-native-menu="false" data-theme="c" onChange="" style="display:none"> <option value="1">An optinos</option> </select>

I am trying to show / hide jQuery Mobile select elements depending on other user actions, so I am doing this.

Any ideas?

+8
jquery jquery-mobile
source share
1 answer

When your page loads, jQuery Mobile enlarges your page to have a mobile look. Unfortunately, the current problem with the jQuery mobile device is that it cannot attach special classes (and even custom styles, style attribute) to extended elements. Please check https://github.com/jquery/jquery-mobile/issues/3577 . As a workaround, while this problem is still not resolved, you can wrap it inside a div element and control the display of the div shell.

 <div id="dddd-wrapper" class="ui-screen-hidden"> <select data-mini="true" data-native-menu="false" id="dddd" name="dddd" data-theme="c" onChange="" style="display:none"> <option value="1">An optinos</option> </select> </div>

ui-screen-hidden is a jquery mobile defined style rule (in jquery.mobile..css) to hide an element.

+12
source share

More articles:


All Articles