JQuery mobile Choose option text too long

I have a problem with selecting fields in my forms. This is a single selection field, so jQuery turns it into a button that I can select to select the appropriate option. If the text of this option is quite long, the selection button becomes wider than the screen, so it is only partially visible.

I checked that jQuery is being created to display the button, and it has a set of CSS overflows: an ellipse, so when I give the specified range a fixed width smaller than the screen width, the option text is truncated using "..". "and everything looks good.

Can this behavior be triggered automatically?

the 'viewport' meta tag is set to 'width = device-width, user-scaleable = no'

+3
source share
2 answers

Maybe late, but I hope someone else finds this useful. If the selection is wrapped in a fieldset tag , replacing it with a div , it can fix the problem.

+2
source

I also looked for ways to set the width of the selection field, but after a long search on Google, I gave and just shortened the text that appears in the select control.

        <script type="text/javascript">
            $('#myselect').change(function () {

                var sel = $("#myselect option:selected").text().substring(0, 20);
                $("#myselect option:selected").text(sel);

            });
        </script>

I know that this is not very useful, but it seemed to me that the selection field is one of the most difficult to interact with or, if not what the Internet says.

I will post the "jQuery select cheat sheet", which I found useful in my quest for a solution → http://comp345.awardspace.com/select_element_cheatsheet.pdf

0
source

All Articles