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

[kbwood]

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.

[Scott González]

See also #4753.

[c_schmitz]

I would love to get this fixed...

[kzamir]

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

[tombigel]

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

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

[Scott González]

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

Changeset: a9d854967f0175b4c4b8a48c76a71d0fd1028680

[[email protected]…]

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.

[Scott González]

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