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
Related
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.
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 have a div which is filled with dynamic content. The div width is set to 680px, however if the content exceeds this width, rather than wrapping, it just keep going on a single line creating a very wide div.
What should I do to enforce the 680px of the div and force the dynamic content to wrap within those restraints?
thanks
You can try to add the following in your div's css class:
.someClass {
word-wrap: break-word;
width: 680px;
}
Hope it helps!
Demo
I've got a page with three sections that are 100% width and 100% height of the body with the exception of one section which is 200% the width of the body. On this section I'd like to be able to scroll horizontally to see the rest of the div, but I don't want the rest of the sections to have white space to the right of them as they currently do. If I set body{ overflow-x:hidden;} I can't scroll horizontally on the wider div. Any suggestions?
You need to encase the width:200%; div inside a container that has 100% width, so that it stays within the body, then set the container to overflow-x:auto;
Here is a jsFiddle to show what i mean.