Search and Top Navigation
#6001 closed bug (duplicate)
Opened August 29, 2010 09:59AM UTC
Closed October 12, 2010 12:53AM UTC
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.
Attachments (0)
Change History (4)
Changed August 29, 2010 10:10AM UTC by comment:1
Changed September 03, 2010 12:30PM UTC by comment:2
| 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 |
Changed September 05, 2010 06:22AM UTC by comment:3
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...