Overflow text not truncated with select menus in control groups #3150

Closed
begmandev opened this Issue Nov 23, 2011 · 4 comments

Projects

None yet

4 participants

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.

@Wilto Wilto was assigned Nov 23, 2011
Contributor

Good catch. We just need to tweak some styles to make this work.

Contributor
Wilto commented Feb 20, 2012

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.

See:
http://stackoverflow.com/questions/1716183/html-fieldset-allows-children-to-expand-indefinitely
https://bugzilla.mozilla.org/show_bug.cgi?id=504622

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.

Contributor
Wilto commented Feb 21, 2012

This is already an open bug for the Mozilla folks, and I’ve just filed a bug with the WebKit team:
https://bugs.webkit.org/show_bug.cgi?id=79128

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.

@Wilto Wilto closed this Feb 21, 2012
mnotw commented Apr 21, 2015

I have the same problem here, how did you manage it ?

@Wilto Wilto was unassigned by mnotw Apr 21, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment