I have an absolutely positioned div, with overflow:auto.
When it overflows vertically, a vertical scrollbar appears. This appears within my div (even though it isn't fixed width), which shrinks the space available to the div's contents. In my case, it causes the text to wrap unnecessarily, which is undesirable.
See https://jsfiddle.net/hktgcrj0/ - shrink the page until the div overflows and the scroll bar appears - you will see the text wrap.
Is there any way to make the scrollbar appear outside of the div, or increase the width of the div to accommodate the scroll bar?
Note that for my application (the fiddle is massively simplified) giving the div a fixed width is not an option, and disabling text wrapping is also not an option.
Try adding:
div {
white-space: nowrap;
}
or wrap the inner elements in <p> tags and apply white-space: nowrap; to that.
Related
I want to make element scrollable if it's content is becoming too large to fit in parent's max-height. The problem is that it overflows parent instead of adding scrollbar.
I know that providing height or max-height in pixels to element would fix the issue but I cannot do that because the height of the element is not known.
Link to the code: https://codesandbox.io/s/scrollable-height-ewfbmo?file=/src/App.js
(I want purple section to be scrollable)
So to scroll the purple region:
Just add overflow: auto to the .body class (the parent of the purple region)
I forked your code-sandbox:
https://codesandbox.io/s/scrollable-height-forked-9hvrpy?file=/src/styles.css
How to add scroll to a block element?
I've used overflow-y: scroll, but it immediately creates a scrollbar. I want scrolling after my div has reached a specific height.
You should use overflow-y: auto to get scroll after fulfilling the height of an element.
auto Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows. - MDN
Whereas scroll Content is clipped if necessary to fit vertically in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content. - MDN
First you have to give a proper height and width of your content area where you have to overflow.
You have a <div> which has more content than your area than you can use overflow tag with scroll.....
width: #;
height: #;
overflow: scroll;
I have a case in which i have to show the content horizontally with overflow-x:scroll;.
Now in this Fiddle the first block has overflow-y:scroll; which gives a scroll and user is able to scroll the content. Where as in the second block user is not able to scroll the content. I want an output this way in the Image, where user can scroll horizontally and see the content.
You need to define an inner container for your second block and give it a width.
<div class="test2"><div>dfdsfdsfds</div></div>
and
.test2 div {
width: 600px;
}
http://jsfiddle.net/qM45U/8/
The reason for this is that by default, when test reached it's width it will word wrap whereas within the y-axis it will just increase the height of the container (if allowed). You could just set white-space to nowrap but then you'd end up with the longest single line of text in the world :)
Give your second div a child div to wrap the content that has the same height but a bigger width. Then style it:
.test2 div {
width:500px;
height:100px;
}
jsFiddle example
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 a div set with overflow:auto and also height: auto. The div contains text data and a big image.
I have verified using firebug these attributes are being applied fine, but still scrollbar appears vertically. I will like div to expand automatically to required height.