Opened 9 years ago

Closed 9 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 9 years ago by jonathan

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

comment:2 Changed 9 years ago by Scott González

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

comment:3 Changed 9 years ago by jonathan

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

comment:4 Changed 9 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #4623.

Note: See TracTickets for help on using tickets.