Question: I'm having a problem with select fields in my forms.
It's a single select field, so JQuery turns it into a button which I can tap on to select the respective option. If the text that option is rather long, then the select button becomes wider than the screen, so it's only partly visible.

I checked the that gets created by JQuery to display the button and it has the CSS 'overflow: ellipse' set, so when I give said span a fixed width smaller than the screen width the option text gets truncated with '...' and everything looks fine.

Is there a way to trigger that behaviour automatically?

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

Answer: 
It maybe late, but I hope someone else can find this helpful.
If the select is wrapped in a **fieldset** tag, replacing it with a **div** can fix the problem.
I was also looking for ways to set the width of the select box, but after googling for a long time, I gave in and just shortened the text that is displayed 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 this isn't much helpful, but it has come to my understanding that the select box is one of the toughest to interact with, or at lest, that's what the internet is saying.

I'll throw in a "JQuery select cheat sheet" which I found helpful in my pursuit of a solution -> <http://comp345.awardspace.com/select_element_cheatsheet.pdf>