Search code examples
javascriptjquerycssjquery-uijquery-ui-dialog

jquery dialog overlays scrollbar when the window has a scrollbar

I am using jquery dialog to show a dialog. I am able to place it bottom left corner which is where I want it. Trouble is if the main window has a scrollbar, the dialog goes to bottom left of the scrollbar, thereby overlaying the scrollbar. One would expect that bottom left of the window means bottom right of the scrollbar and not the bottom left of the scrollbar.

I have tried specifying position object option to jquery dialog without success. I have tried all four values fit, flip, flipfit and none of the collision option in the position object. But none of them seem to do the trick.

I know there is a hacky way to calculate the width of the scrollbar and move the dialog by that much and I have already employed this hack in a number of places. But I am hoping for an API way of doing it.

Does anybody know of a way ?

Actual Behaviour

enter image description here

Expected Behaviour

enter image description here

Solution

  • There is no real way to do this, all browsers suck at displaying scrollbars on the left. The ideal way is not to use the scrollbars on the left. Most famous news paper websites in Hebrew and Arabic seem to use right scrollbars. So, the defacto standard is to use a scrollbar on the right irrespective of the language.

    This is not the only problem that a left scrollbar introduces.

    • Safari won't even show a scrollbar on the left even if you mark the html RTL.

    • Firefox shows the scrollbar on the left. But it mangles the absolute left and top calculation.

      • Let's suppose you have an image inside html marked RTL. You want to overlay a div over the image. So you need to get the left, top, width and height of the image. Your scrollbar is on the left because it is a RTL language. When you ask for the dimensions of the image, firefox will return correct dimensions. Now if you apply these dimensions to a div that you want to overlay on the image, firefox will consider the right-top side of the left scrollbar as the origin. Notice that the image was rendered with left-top of the left scrollbar as the origin, therefore your overlay is off by scrollbar width.

    • Chrome seems to be the only browser that implements this well. But because other browsers don't implement this well, we end up doing browser specific stuff anyway.

    • IE9 and IE8 behave exactly like Firefox.

    Anyway, my answer is more of a rant so other people might find this helpful.