I have read this CSS overflow-x hidden and overflow-y visible (and a lot of other posts) but i can't get this to work in my specific case.
I'm using ths slick-slider and want to add dropdown-navigation. so i have to use a special markup.
The dropdown should overflow the slider.
I recreated the problem in the fiddle
Thank you for your help!
Setting overflow-x or overflow-y to hidden causes the other to be treated as if it has a value of auto. So slick-slider adds a scrollbar for any overflow in the y direction.
You can normally get around this by adding position: absolute. However, absolute positioning is based on the closest parent element with relative positioning. In this case, that's slick-slide, which is a child of slick-slider. As a result the dropdown is still positioned inside of slick-slider and doesn't overflow.
To resolve the issue remove position: relative from all classes that currently have it. I recommend adding position: relative to the wrapper class as well.
The problem is in .slick-slider class. If you set a little bigger height you can get past overflow, although I don't know why overflow:visible doesn't work.
Related
Here's the codesandbox, as the code is too much to post here, given the nested elements.
I'd like to have:
a horizontal scroll for the .content div.
a vertical scroll just for the .group-body div.
I've tried everything and I can't get it to work.
This rule does make it "work", but I feel like it's not optimal.
.body{
height: 90vh;
}
You just need to specify max-height for .group-body and then overflow-y will work as expected.
See this fix in your code
This should solve your problem - https://codesandbox.io/s/divine-dawn-1n8b1.
It uses a flexbox instead of grid layout.
Note: The code in the link was fixed after a comment pointed out an issue. To fix the scrolling, I set the parent elements that contain the sidebar and the content to overflow:hidden, and set the parent element to overflow:auto, which allowed for the scroll bars to be contained in the content div.
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
I got the following issue:
I'm trying to display a few <div.content> with content in it. Limited in size to a <div.holder> as parent with overflow set, so that you can scroll down to see all <div.content>. The <div.content> are overlapping the <div.holder> for styling purpose. And everything is wrapped in a <div.container>.
But the <div.content> won't display over the <div.holder> element with z-index or anything. It's rendered inside the <div.holder> element, without scrollbar it's rendered outside, like i want.
How can i get the Scrollbar and that the <div.content> will overlap its parent <div.holder>?
Here's the Fiddle for the issue. Thank you.
EDIT:
Trying to accomplish this:
For this styling purpose:
Is this even possible? I'm not bound to just use HTML&CSS, just need that thing start working.
Z-index will only work on elements with position. So its not doing anything to .foo
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Is there a way to target html elements that I don't want to affect the width of the page?
In other words, those elements wouldn't trigger the horizontal scrollbar, if they were to leave the browser box.
You could use the CSS overflow: hidden to keep them from affecting your layout.
You can use overflow:hidden on the elements you don't want the scrollbar on.
You can also use overflow-x:hidden or overflow-y:hidden Reference
Checking other sites structures, the solution seems to be pretty simple:
Wrapping everything in a relative positioned container(with overflow:hidden) lets the container grow with the contents of the page, while not letting the elements show out of it's borders.
Example:
http://jsfiddle.net/LnNQJ/1/