CSS Grid and Overflow
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 '18 at 0:42
Michael_B
146k47234340
asked Nov 21 '18 at 23:58
AkronAkron
694620
add a comment |
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 '18 at 0:42
Michael_B
146k47234340
asked Nov 21 '18 at 23:58
AkronAkron
694620
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 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 '18 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 '18 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 '18 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 '18 at 18:22
add a comment |
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 '18 at 0:42
Michael_B
146k47234340
asked Nov 21 '18 at 23:58
AkronAkron
694620
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 '18 at 0:42
Michael_B
146k47234340
asked Nov 21 '18 at 23:58
AkronAkron
694620
edited Nov 22 '18 at 0:42
Michael_B
146k47234340
asked Nov 21 '18 at 23:58
AkronAkron
694620
edited Nov 22 '18 at 0:42
Michael_B
146k47234340
edited Nov 22 '18 at 0:42
Michael_B
146k47234340
edited Nov 22 '18 at 0:42
Michael_B
146k47234340
146k47234340
asked Nov 21 '18 at 23:58
AkronAkron
694620
asked Nov 21 '18 at 23:58
AkronAkron
694620
asked Nov 21 '18 at 23:58
AkronAkron
694620
694620
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 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 '18 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 '18 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 '18 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 '18 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 '18 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 '18 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 '18 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 '18 at 0:52
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 '18 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 '18 at 9:38
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 '18 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 '18 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 '18 at 18:22
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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 '18 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 '18 at 0:20
possible duplicate of : stackoverflow.com/questions/53061013/…
– Temani Afif
Nov 22 '18 at 0:52
Don't use left: 105%; then, more like left: 1em;
– Carol McKay
Nov 22 '18 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 '18 at 18:22