sScrollY, overflow-x, and Firefox issues.

pietro

Hi,

I am using "sScrollY", and thus my "div.dataTables_scrollBody" is being given an inline "overflow: auto".

My problem is that the table contains a dropdown menu over near the right edge. Sometimes the dropdown menu needs to oveflow out of the table.

This works so far on Chrome and Safari, but on Firefox 14.0.1 the "overflow" is causing the dropdown to be clipped.

I poked the dataTables code and changed it to add just "overflow-y: auto" and updated my stylesheet to ensure "overflow-x: visible !important", but no dice. It seems to only work if I change it to "overflow: visible", but obviously that breaks the vertical scrolling.

I wonder if you have any advice?

allan

Could you possibly link to an example shown the issue so I can picture it? Is it that the select menu is being clipped? If so, it sounds like it might be that the browser is applying the z-index ordering to the select menu's pop-up, which would be a bit of an odd thing to do imho.

Allan

pietro

Hi Allan,

I actually seem to have broken the code that was working on Chrome/Safari, so now I can't get the dropdown to overflow out of the table in any browser! I'll have to try figure out what I changed.

Look at http://jsfiddle.net/hbmqT/8/ on Firefox when you have time.

That fiddle shows my problem. You can see that when a dropdown is visible, it grows the table horizontally. I'd like for the table to stay at it's original width (i.e. no horizontal scroll) and for the dropdown to still be fully visible (i.e. peeking out over the right edge of the table as necessary).

If you go into the web inspector and remove the "overflow: auto" that dataTables adds to the ".dataTables_scrollBody" div, you get the effect I want in the x-axis, but of course lose the vertical scrolling.

I had assumed that the inline style could be changed to "overflow-x: visible; overflow-y: auto;" and it would work as desired, but whenever "overflow-y: auto;" is present, the horizontal scrollbars will appear, which confuses me to be honest.

Does this make sense? Do you understand what I'm looking for?

Thanks for reply. P.

Groover

Hi Pietro,

did you find a solution to this problem?

I am also facing a similar issue with my drop down menu.

Thanks!

allan

@pietro - You've probably moved on from this post - sorry missed it at the time. The problem with your table I think is that the drop down needs to be positioned above the table - outside of the table's context - i.e. position absolute. The other option is to alter the select plug-in to draw the select list within the bounding box of the container, since it is it's width that is causing the problem.

> I had assumed that the inline style could be changed to "overflow-x: visible; overflow-y: auto;" and it would work as desired, but whenever "overflow-y: auto;" is present, the horizontal scrollbars will appear, which confuses me to be honest.

Damn annoying that isn't it! Would have solved a lot of problems over the yeas for me if that would work. But it doesn't - its part of the CSS specification and all browsers appear to do it. Mad.

@Groover - Can you link to a test case please? Or is it identical to pietro's? In which case, same solutions apply :-)

Allan

Groover

Hi Allan,

The problem I am facing sounds very similar to pietro's problem, the drop down menu ends up under the dataTables_scrollBody.

Unfortunately I don't have a small test case for this yet, but I can send you a screen shot if you like.

I am wondering if it would be possible to spot the problem by just having a look at this extract.

Thanks!

[code]



















[/code]

allan

If its the same issue, that as I say, you need to move the element above or out of the table scroll container, or modify whatever script you are using to respect the boundaries of the container container.

Allan

Groover

hmm, any ideas how to do that if I want to have the drop down menu inside the table row's innerDetails?

Thanks!

allan

Alter the script you are using to append to the body, or alter it to respect the scrolling container's boundaries.

Allan