When placing a select menu form element inside of a list, options with long overflow text are not being truncated when the select menu(s) are placed within a control group.
Here is a jsbin that demonstrates the problem: http://jsbin.com/isulep
In the above example, if you select the option with long text in the first set of list boxes, depending on your page/screen dimensions, the select menu automatically expands beyond the margins of the list itself.
However, if you use a standard select menu that is not contained in a control group the long label text gets truncated as expected when selecting that option.
I was able to reproduce this issue on Firefox 3.6, Chrome 15.x, and iOS 5.0.1. Interestingly, this doesn't seem to be a problem in Internet Explorer 8.
Good catch. We just need to tweak some styles to make this work.
Ah, it’s never easy, is it? Looks like this is an issue with fieldsets, that effects both the WebKit-based browsers and Firefox. If you switch your controlgroup over to a div, you’ll see that things work as expected.
I’m able to patch this up in Firefox by adding one of the more obscure display properties to the ui-controlgroup class—something like display: table-cell. I haven’t found any workarounds on the WebKit side yet, but I’ll keep at it.
This is already an open bug for the Mozilla folks, and I’ve just filed a bug with the WebKit team:
Unfortunately, it’s out of our hands for the time being. While it may be less semantically meaningful, all I can really suggest at this point is switching the <fieldset> out for a <div>. We’ll definitely keep an eye on this issue.
I have the same problem here, how did you manage it ?