select / drop down menus. with opacity: 0
chrishacia opened this issue · 4 comments
When you have a select that has fairly long strings in them the fact that opacity:0 is set to the select to keep it hidden from view still makes it capable of being clicked on in places it overlaps other UI elements. Is there any work around for this?
For sake of example imaging a small template 2 columns, left column is 160px wide, in that column you have a select box acting as a filter for the page your on. That filter has some insanely long 100+ character string in it. say "ABCDEFGHIJKLMNOPQRSTUVWXYZ". This string is roughly 250px which pushes the physically hidden select box out of bounds of its container. Now the select box although hidden is clickable to the right of its displayed uniform version of itself. Which for me in this case just so happens on occasion a clickable region of the column on the right lines up with this so when I go to click on that area in the other column the select opens displaying its options.
This is tested and found true in Chrome, Safari, and FF, on OSX, Windows, and Linux
Just looking to see if there is a work around or intended bug fix for this?
Adding CSS properties "pointer-events: none" and "overflow: hidden" should help it to control elements and their behaviors more easily.
@shehi I believe @chrishacia was suggesting that we fix the problem. You could add pointer-events: none and overflow: hidden to themes/_base/css/uniform._base.css in order to build that into all of the themes by default, right?
If so, would you reopen this issue?
@fidian : I agree, but considering pointer-events is rather experimental technology with limited support especially from IE side, and some inconsistent behavior from others, I didn't think it should actually be engineered into our code. It also might require display: block or display: inline-block for IE 11 and Edge. http://caniuse.com/#feat=pointer-events
Ok, I will consider this issue once more in next iteration. Assigning to myself.
I will stick to my earlier judgment: Please override such selects which already have opacity: 0 on them with something like pointer-events: none and possibly overflow: hidden as I suggested above. This kind of cases are quite circumstantial and I don't want to litter the base code, trying to cover all of them. You don't even need to put !important in your styles: just override it after Uniform's styles, or use some technique that would give your styles higher Specificity (e.g. inline CSS, or styles applied via id'es etc). Just make sure whatever you override, doesn't hurt the inner mechanics of Uniform's script action.