Search code examples
androidjquery-mobilejquery-mobile-popup

show full content in jquery mobile select box data-native-menu=“false”

How to show full content in jquery mobile? I used Select box:

<select data-native-menu="false">

<option>Monday</option>
<option>Sunday jnnj jnkn ikni nin iuniu niun uin iun in in io nono no no n oino  on i </option>
<option>Tuesday</option>

http://jsfiddle.net/8xusq/65/

enter image description here

Solution

  • First give your select an ID:

    <select data-native-menu="false" id="mySelect">...

    For data-native-menu="false", jQM creates either a popup or a dialog (depending on the length of the list and space available) to display the options. The ID of the created popup or dialog is the select ID plus "-listbox-popup" or plus "dialog".

    So you can add CSS that allows the text of the options to wrap:

    #mySelect-listbox-popup ul li a.ui-link-inherit, #mySelect-dialog ul li a.ui-link-inherit {
    white-space: normal;
}

    Updated FIDDLE