Derk Jan Speelman Derk Jan Speelman - 3 months ago 13
CSS Question

Absolute element inside table is causing the table to enable overflow-y: scroll somehow

I have a table with some services. Each service has a "?"-icon that the visitor can click to read more info about the service.

see this fiddle




The table's wrapper has:

@media all and (max-width: 560px) {
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}


so you can easily scroll to the right or left on mobile devices (because the table is too wide for small screens).

But here's the problem: some of the popups (especially the last one) are causing the table's wrapper to scroll vertically, while it doesn't have "overflow-y: scroll" !

Because of the popups there appears a scrollbar and you can scroll inside the table... that's not what i want :(
So when you view this table on mobile devices you can't scroll down the page anymore because the table is in the way.

Here's what I do want: the popups have "z-index: 1;" so the popups will be on top of almost all other elements. So the popup should also hover above elements below (and outside the table). The table height should basically be the same as it's wrapper, but the popup need to be able to flow over the edges of this wrapper (and table). I thought that was automatically done thanks to it's "position: absolute;" but that was not the case.




UPDATE:

Really ugly solution: set a margin-bottom to the table equal or larger to the last and highest popup, so the table-wrapper will not need a vertical scrollbar. But like I said: really ugly.

Thanks for your time!




see this fiddle




UPDATE (minor): I only set "overflow-x: auto" on the wrapper when the table is larger than the screen (approx. 560px), so the problem won't show on desktops.



Answer

EDIT2 Checkout this jsFiddle I think it's working now :)

EDIT

enter image description here

if you want to hide the vertical scrollbar that shows when screen width is < 560px then you can simply disable it using overflow-y:hidden and to show the popup over other elements following the table you can set height:100% in you @media query

@media all and (max-width: 560px) {
  .table-wrapper {
    overflow-x: auto;
    overflow-y:hidden;  // <-- 
    height:100%;        // <--
    -webkit-overflow-scrolling: touch;
  }
}

And to hide the space after the table you can't set the next element to a negative margin-top like this

div_after_the_table {
margin-top:-75px;
}
Comments