Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
begmandev opened this Issue · 3 comments

3 participants

begmandev Todd Parker Mat Marquis
begmandev

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.

Mat Marquis Wilto was assigned
Todd Parker

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

Mat Marquis

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.

Mat Marquis

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.

Mat Marquis Wilto closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.