CSS Grid and Overflow
up vote
0
down vote
favorite
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>html css css3 grid css-grid
edited Nov 22 at 0:42
Michael_B
141k45225335
asked Nov 21 at 23:58
Akron
698620
add a comment |
up vote
0
down vote
favorite
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>html css css3 grid css-grid
edited Nov 22 at 0:42
Michael_B
141k45225335
asked Nov 21 at 23:58
Akron
698620
1
Please share some code or create a fiddle/codepen to explain and show what you have tried so far?
– Gurtej Singh
Nov 22 at 0:03
You can definitely use position absolute within a grid, but as Gurtej mentioned, seeing some code would make this easier to help with.
– Robert Perez
Nov 22 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 at 9: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 at 18:22
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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>html css css3 grid css-grid
edited Nov 22 at 0:42
Michael_B
141k45225335
asked Nov 21 at 23:58
Akron
698620
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>.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>.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>html css css3 grid css-grid
html css css3 grid css-grid
edited Nov 22 at 0:42
Michael_B
141k45225335
asked Nov 21 at 23:58
Akron
698620
edited Nov 22 at 0:42
Michael_B
141k45225335
asked Nov 21 at 23:58
Akron
698620
edited Nov 22 at 0:42
Michael_B
141k45225335
edited Nov 22 at 0:42
Michael_B
141k45225335
edited Nov 22 at 0:42
Michael_B
141k45225335
141k45225335
asked Nov 21 at 23:58
Akron
698620
asked Nov 21 at 23:58
Akron
698620
asked Nov 21 at 23:58
Akron
698620
698620
1
Please share some code or create a fiddle/codepen to explain and show what you have tried so far?
– Gurtej Singh
Nov 22 at 0:03
You can definitely use position absolute within a grid, but as Gurtej mentioned, seeing some code would make this easier to help with.
– Robert Perez
Nov 22 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 at 9: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 at 18:22
add a comment |
1
Please share some code or create a fiddle/codepen to explain and show what you have tried so far?
– Gurtej Singh
Nov 22 at 0:03
You can definitely use position absolute within a grid, but as Gurtej mentioned, seeing some code would make this easier to help with.
– Robert Perez
Nov 22 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 at 9: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 at 18:22
1
1
Please share some code or create a fiddle/codepen to explain and show what you have tried so far?
– Gurtej Singh
Nov 22 at 0:03
Please share some code or create a fiddle/codepen to explain and show what you have tried so far?
– Gurtej Singh
Nov 22 at 0:03
You can definitely use position absolute within a grid, but as Gurtej mentioned, seeing some code would make this easier to help with.
– Robert Perez
Nov 22 at 0:20
You can definitely use position absolute within a grid, but as Gurtej mentioned, seeing some code would make this easier to help with.
– Robert Perez
Nov 22 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 at 0:52
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 at 9:38
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 at 9: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 at 18:22
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 at 18:22
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422110%2fcss-grid-and-overflow%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Please share some code or create a fiddle/codepen to explain and show what you have tried so far?
– Gurtej Singh
Nov 22 at 0:03
You can definitely use position absolute within a grid, but as Gurtej mentioned, seeing some code would make this easier to help with.
– Robert Perez
Nov 22 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 at 9: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 at 18:22