Skip to main content

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:

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 jonathan comment:1

For the sake of other visitors, the workaround I found was to change the following in jquery-ui-1.8.4.custom.css:


.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }


.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...

Changed September 03, 2010 12:30PM UTC by scottgonzalez comment:2

component: ui.coreCSS Framework
milestone: TBD1.9
summary: Bad CSS behavior for buttons based on radio buttons under firefox and rtlCSS: .ui-helper-hidden-accessible causes scrollbars in RTL documents

Changed September 05, 2010 06:22AM UTC by jonathan 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...

Changed October 12, 2010 12:53AM UTC by scottgonzalez comment:4

resolution: → duplicate
status: newclosed

Duplicate of #4623.