#4623 closed bug (fixed)

Opened June 21, 2009 09:16AM UTC

Closed November 22, 2010 04:13PM UTC

Last modified March 14, 2011 09:07PM UTC

CSS: ui-helper-hidden-accessible affects page layout

Reported by: kbwood Owned by:
Priority: minor Milestone: 1.8.7
Component: ui.css-framework Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

Ticket #4423 highlighted a problem with the ui-helper-hidden-accessible class and its application to the datepicker in pages with the body styled with direction: rtl. I can only reproduce this in IE7. The problem is the ui-helper-hidden-accessible class initially applied to the popup datepicker division. This positions it very far to the left, which effectively increases the page width and causes the location of the input field (jQuery.offset()) to be read as very far to the right. The datepicker is then shown at that position, i.e. off the screen. Thereafter the positioning undoes the initial setting and the datepicker shows normally. This needs to be fixed in the ThemeRoller core CSS. Rather than positioning to the left it could position above the page and not affect the horizontal rendering.

Attachments (0)
Change History (10)

Changed July 09, 2009 01:47PM UTC by jzaefferer comment:1

milestone: TBD → 1.8

Changed August 06, 2009 01:45PM UTC by scottgonzalez comment:2

See also #4753.

Changed February 11, 2010 04:35PM UTC by c_schmitz comment:3

I would love to get this fixed...

Changed April 13, 2010 04:45PM UTC by kzamir comment:4

I can confirm this problem in ie7,8

As suggested above, changing:

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

to:

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

fixes this problem

Changed October 27, 2010 08:54PM UTC by scottgonzalez comment:5

summary: ui-helper-hidden-accessible problems in right-to-left pages in IE7 → CSS: ui-helper-hidden-accessible affects page layout

Changed November 22, 2010 08:47AM UTC by tombigel comment:6

A cleaner solution from html5boilerplate (tested, working on all browser):

position:absolute;

clip: rect(0,0,0,0);

Changed November 22, 2010 04:13PM UTC by Scott González comment:7

resolution: → fixed
status: new → closed

CSS: Rewrote .ui-helper-hidden-accessible base on HTML5 Boilerplate. Fixes #4623 - CSS: ui-helper-hidden-accessible affects page layout.

Changeset: a9d854967f0175b4c4b8a48c76a71d0fd1028680

Changed December 08, 2010 06:35PM UTC by scottgonzalez comment:8

milestone: 1.9 → 1.8.7

Changed March 14, 2011 08:57PM UTC by geordie@korper.org comment:9

For what it's worth the fix does not work on Chrome for Mac (but it works in Safari and Firefox on Mac). I had to add negatives for top and left to force Chrome not show scroll bars in one of my "overflow:auto;" divs that contained hidden items.

Changed March 14, 2011 09:07PM UTC by scottgonzalez comment:10

Works fine for me: http://jsbin.com/uzaxo4/edit I don't get any scrollbars in Chrome.