0

Imagine the simplest possible CSS Grid layout of a 2-column page with both pages taking exactly 50% of the view-width. I have elements laid out in this manner, but I also have some tooltips which are positioned absolute on elements on my page. These tooltips are overflowing the content and cause the CSS grid to have a horizontal scrollbar, up to the full width of the tooltips.

The overflow-x property of each panel seems to default to scroll, as I mentioned. It is possible to set it to "hidden" as well which truncates the tooltips when they cross over onto the other panel.

However, it does not seem possible to set overflow: visible. Is it possible to have a CSS grid column layout but also support position: absolute elements which can "cross over" onto the other side of the grid?

EDIT: https://codepen.io/AngryPidgeon/pen/eQVMgL I figured out that setting "overflow-y: scroll" is part of the problem. When this is not set, the tooltip appears overlaid on the right panel as expected. When overflow-y: scroll is set, the left panel then also scrolls horizontally and will not allow the tooltip to appear overlaid on the right panel no matter what.

.grid {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
}

.left {
  background-color: beige;
  grid-area: left;
  overflow-y: scroll;
}
.right {
  background-color: khaki;
  grid-area: right;
}

.tooltip-wrapper {
  position: relative;
}

.tooltip {
  background-color: white;
  position: absolute;
  top: 105%;
  left: 105%;
}
<div class='grid'>
  <div class='left'>
    <div class='tooltip-wrapper'>
      <p>Content and text and stufdf</p>
      <p class='tooltip'>Tooltip text</p>
    </div>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
  </div>
  <div class='right'>
    <p>More Content</p>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Akron
  • 1,413
  • 2
  • 13
  • 28
  • 1
    Please share some code or create a fiddle/codepen to explain and show what you have tried so far? – Gurtej Singh Nov 22 '18 at 00:03
  • You can definitely use position absolute within a grid, but as Gurtej mentioned, seeing some code would make this easier to help with. – Robster Nov 22 '18 at 00:20
  • possible duplicate of : https://stackoverflow.com/questions/53061013/ignore-overflow-of-parent-element/53061196#53061196 – Temani Afif Nov 22 '18 at 00:52
  • Don't use left: 105%; then, more like left: 1em; – Carol McKay Nov 22 '18 at 09:38
  • There is no difference between EM and % here. It makes sense to use % because Im positioning the tooltip relative to the element it is attached to. The accepted answer in stackoverflow.com/questions/53061013 was to use transform: translate and that yields the same problem as well, same as using left: 105%. – Akron Nov 22 '18 at 18:22

0 Answers0