Opened 13 years ago
Closed 12 years ago
#6001 closed bug (duplicate)
CSS: .ui-helper-hidden-accessible causes scrollbars in RTL documents
| Reported by: | jonathan | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.9.0 |
| Component: | ui.css-framework | Version: | 1.8.4 |
| Keywords: | rtl | Cc: | |
| Blocked by: | Blocking: |
Description
This bug is reproduceable on firefox (both on Win and Linux) This bug even happens in the demo that comes with UI.
When you unzip jquery-ui-1.8.4.custom in the top directory you have index.html that presents examples.
Try adding the following line to the <head> of index.html: <style>body { direction: rtl; }</style>
You'll notice immediately that you get a huge horizontal scroll-bar. Try now clicking on "Choice 1" under "Button" - Wow - scrolled to infinity!
I've marked this as major, as this hinders usage in all rtl sites.
Change History (4)
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
| Component: | ui.core → CSS Framework |
|---|---|
| Milestone: | TBD → 1.9 |
| Summary: | Bad CSS behavior for buttons based on radio buttons under firefox and rtl → CSS: .ui-helper-hidden-accessible causes scrollbars in RTL documents |
comment:3 Changed 13 years ago by
the workaround above may be problematic as the button element although not visible may be still clickable. Another workaround, which may also be a solution, is to move the button to -99999999px on the y axis, i.e. use top instead of left. I'm leaving it to the pros to test and decide about this...
For the sake of other visitors, the workaround I found was to change the following in jquery-ui-1.8.4.custom.css:
from: .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
to: .ui-helper-hidden-accessible { position: absolute; left: 100px; visibility:hidden }
Note that I don't know if this is perfect, or if it doesn't screw other stuff...