html5 select control with long text in mobile
I am developing a mobile website with html5 (not an app).
In the web site, I have a select control (dropdown) that contains very long text. When I display the web site in a mobile phone with android (e.g galaxy s4) in the default browser, when I touch the select, the options with long text are partially displayed and after this dots are displayed.
It's important to display all the text because there are options that are almost the same, only the words in the end are different.
I found a solution for ios, to add <optiongroup> at the end of the options, but that was not helpful in android.
Try this it will help you
<!-- On page load, be sure that something else has focus. --> <body onload="document.getElementById('name').focus();"> <input id=name type=text> <!-- This div is for demonstration only. The parent container may be anything --> <div style="height:50; width:100px; border:1px solid red;"> <!-- Note: static width, absolute position but no top or left specified, Z-Index +1 --> <select style="width:96px; position:absolute; z-index:+1;" onactivate="this.style.width='auto';" onchange="this.blur();" onblur="this.style.width='96px';"> <!-- "activate" happens before all else and "width='auto'" expands per content --> <!-- Both making a selection and moving to another control should return static width --> <option>abc</option> <option>abcdefghij</option> <option>abcdefghijklmnop</option> <option>abcdefghijklmnopqrstuvwxyz</option> </select> </div> </body> </html>
the text will shown you without dot mark..try this and let me inform