I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
Related
Right now I have a sidebar that minimizes and expands along with the content beside it.
This is wrapped around a main wrapper component such that I can pass any content/component.
However, if the content is too long the sidebar height will not adjust. I have tried setting the height and min-height and it didn't do anything.
Things I have tried/have thought about:
Faux columns however I am not sure to implement it in my use-case.
Make the sidebar fixed however I am not sure how will the content (children of the main wrapper) will adjust if the sidebar is minimized/expanded.
Here is what is happening right now.
Here is the sandbox link: Sidebar Codesandbox
Make the sidebar fixed however I am not sure how will the content
(children of the main wrapper) will adjust if the sidebar is
minimized/expanded.
To achieve this you need to create a global state with useContext, to adjust two separate components. And then change the active class of the parent element .content-wrapper. This will be a trigger the .sidebar, .sidebar-btn and .content components. Make some css changes to the css file.
You can add height:max-content; for the text, and in the css declare a variable that is equal to the height, than in the sidebar height you can set height to the variable.
On the .content-wrapper class replace the height: 100vh; with min-height: 100vh
Add align-items: stretch;
From the .content class remove the height: 200vh;
This should make the sidebar grow its hight and match the height of the content.
The reason why your current styles are not working is you have fixed height for both the elements inside flex. For the content, the text is much more than 200vh height and is overflowing. Giving align-items: stretch; to the flex parent (in this case it is the content-wrapper) will increase the height of the children elements to either min-height of the flex parent or to the height of the child (content) with most height if the height of the child is greater than min-height of the parent. For your example, if the height: 200vh; is not removed from the content then this will be the child's height that is greatest and therefore the sidebar's height will stretch till 200vh and will not extend beyond 200vh.
I'm trying to build a simple layout with fluid values (percentages for height and width). I got a container and a wrapper, but for whatever reason, I can't seem to change the width and height values of the wrapper.
I got a wrapper with the following values:
div.wrapper{
height: 80%;
width: auto;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
As well as a container with the same code but wider. When I remove the overflow: hidden-value, the wrapper will just becomes really thin and not actually "wrap" around any of the internal elements.
Since this is a kind of complicated problem, I posted my entire layout on JSBin:
http://jsbin.com/folaveda/1/
The problem is apparent there as well, as well as all the css that causes it.
You need to set the height property on the container, then you can set the child .wrapper to consume a percentage of its parent's element. Percentage heights and widths are relative to their immediate parent element's dimensions. In your scenario, the parent element is only consuming the dimensions of its children's contents, thus your perceived issue. Adjust the dimensions of the parent/s and you'll have your solution.
note, you'll likely need to set the dimensions on the body and html element explicitly to something like 100%, or a value that's more appropriate for your scenario.
I am trying to create a navigation element (nav) that spans the full width of the page, but when the windows shrinks enough where the text overflows, the text wraps. As this is the navigation bar for the page, I'd prefer it didn't wrap and the page just scrolls when the nav's content overflows it. I was thinking giving it a width in pixels instead of just 100% would work, but I don't know how to make it the full width on every screen using pixels. Any idea how to do this? I am using SASS too if that could help with a solution.
Basically, I need a solution that makes a element act as though its width were set to 100%, but it can't wrap the text if there's overflow. The window should scroll if there's overflow.
Put in the css style white-space:nowrap;
If you want a scroll bar in the div, go for overflow:scroll; and set a height of one line, and don't use nowrap.
Full width should be easy: width: 100%
If you want specifics, show us your code.
I think your best bet would be to set a minimum width on your nav element. This way, it will only scale your div to a certain point so it doesn't wrap. The only downside of this is that you need to specify a width, but the upside is it works without any of the div being cut off.
http://jsfiddle.net/piedoom/Km4Xa/1/
You can see in my CSS I have the following:
div
{
width: 100%;
background: red;
min-width: 250px;
}
The min width specifies how small the div can get before it just stays at that value instead of taking the window as it's width.
You can also apply this to the body so it works on all elements.
I have created this layout http://jsfiddle.net/6GVSu/ and the idea is to have centered container, which can have variable width, depending on its content. This is working just fine, but in this container I want to have header section which stays allways on top and the body container, which should fill the rest of the centered parent and show scrollbars if needed.
And now I am kind of stuck, I have tried to make this body container absolute positioned and stretch it within the parent, bud it will cancel its possibility to stretch the parent horizontaly.
And when I left it without positioning, it fills the rest of its parent as in fiddle, but it doesn't show the scrollbar eventually.
So please can someone give me some suggestion?
Thanks
You didn't set a height on the "body" class
.body
{
overflow:auto;
height: 300px;
}
Take off the height on the "innerPositionDiv" element
Updated Fiddle
You need to set the height of the <div class="body"></div> & set its `overflow-y: scroll'
Check this: http://jsfiddle.net/6GVSu/3/ updated
.body
{
height: 100%;
overflow-y:auto;
}
I'm trying to use a div to repeat a background to 100% of the height of the content inside the wrapper.
I'm using overflow: hidden to do this, but this (unsurprisingly) cuts off content at a point dependent on the user's screen resolution.
Removing the overflow:hidden line means the background won't repeat at all and the #wrapper div doesn't assume the full height of the content.
You can see my code and a preview here - http://jsbin.com/ikuba4/2 - if anyone has any pointers that would be great!
EDIT: To clarify, the issue is that I need my #wrapper div (which contains the background image slice repeating vertically) should dynamically extend its height to the height of the #inner_wrapper div - removing overflow:hidden results in the #wrapper div not extending its height at all, while using overflow:hidden extends the height to a point but then content gets cut off.
On #wrapper:
Remove height: 100%.
Remove overflow: hidden.
On #inner_wrapper:
Remove height: 100%.
Add overflow: hidden.
Testing with Firefox/Firebug, those steps sort it out.
Here is a fixed jsBin which is doing the equivalent of those steps.
Edit:
As #Marnix pointed out in his answer, you should also remove height: 100% from #outer_container - I don't think there's any need for it to be there.
A little different which works as well:
#outer_container
remove height: 100%
#wrapper
remove height: 100%
#inner_wrapper
remove height:100%
add overflow:auto