I am trying to make a horizontal menu which consists of a parent div with overflow:hidden and a child with overflow:auto. This allows me to have a scrollable div with no scrollbar.
However, to prevent a break in the li elements, the child element has a white-space:nowrap attribute. This makes the scrollbar appear again.
I tried using a display:table as an alternative to the nowrap but that doesn't allow scrolling.
Any ideas on how to proceed?
Thanks
UPDATE:
Seeing as I have not been able to explain myself correctly, I have uploaded a small example of what I want on jsfiddle: LINK
I want a list of items next to each other which is wider than container and for the user to be able to scroll but without the scrollbar showing. If I have the white-space:nowrap attribute, the scrollbar is present but if I remove it, the elements will go under each other.
Thanks!
#wrapper {
width: 250px;
overflow: hidden;
outline: 1px solid blue;
}
#scroller {
width: 270px;
height: 100px;
overflow: auto;
}
<div id="wrapper">
<div id="scroller">
foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
foo<br>bar<br>
Try This One For E.g
Related
table > tbody {
height: 600px;
display: block;
overflow: auto;
}
table > tbody > tr {
width:100%;
height: 1440px;
display:table;
table-layout:fixed;
}
This css makes a scrollable 'table', or scrollable 'tr'. It WORKS. But my problem is that I have a 'div' inside 'td's inside the 'tr'. And when I set the height of 'div' to 100%, or any height so that the whole 'div' is not within the visible range of tbody, in this case within 600px, the scrollbar for the document appears. The scrollbar for the table is the same with and without 'div'.
The scrollbar of the document extends as long as where the bottom of 'div' should be "behind" the 'tbody'. When I scroll the table, there is NO change to the scrollbar of the document.
Here is a very rough version of my problem: https://jsfiddle.net/hL8hemka/14/
As you can see, there are two scrollbars. If you can't see two, try deleting div { height: 100% } in the css section. You will notice one of two bars on the right (where the document scrollbar should be) disappearing.
How do I make a div with 100% height of tr without scrollbar on the document?
I'm not seeing two scrollbars in your fiddle, unless you mean that there is a horizontal and a vertical scrollbar?
Either way, if you want to hide a scrollbar on any element simply set the overflow-x or overflow-y (depending on if the scrollbar is vertical or horizontal) to hidden. For example, if I wanted to hide a vertical scrollbar I would set overflow-x to hidden in my css like so:
body {
overflow-x: hidden;
}
Just disable the scrollbar:
body
{
overflow: hidden;
}
fiddle
That's because of you have added a border to td, remove that and it fit everything properly. The scrollbar at x-axis hides.
td {
border:none;
}
div {
border: 1px solid #111;
height: 100%; /* Removing this hides the 'document' scrollbar*/
}
If you don't have any other element in the table cells i suggest you to use a different approach.
Instead of set height to the div you can position it as an absolute element. This way you can dimension it using top, left, right and bottom properties.
td {
position:relative;
}
td > div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
In the bookmark_matrix in this fiddle
http://jsfiddle.net/sjD24/14/
I'm trying to hide content outside of the 500 px width
by setting
overflow:hidden
I'm not getting the desired effect as it wraps to the next line instead.
MDN Reference
The two examples I've seen show overflow working with vertical content, I'm not sure if this implies it does not work with horizontal content.
Please note that I do not want it to wrap. Perhaps that would have been a better title.
You have no height set, so the div's height expands as needed. There's no overflow.
You could do something like this:
#bookmark_matrix{
border: 1px dotted #222222;
padding: 5px;
width: 500px;
overflow: hidden;
height: 1em;
}
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
You can try the following css :
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
Use this code:
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar
I have the following:
XHTML:
<div id="container">
// contents
</div>
CSS:
#container { margin: 0 auto; width: 940px; overflow: hidden; padding: 10px; border: 1px solid #CCCCCC; }
The div is centered on the page with margin: 0 auto and I use overflow: hidden to allow the DIV to automatically expand down to the height of its contents.
I have some content in the DIV which has a box-shadow on it. The problem is due to the overflow: hidden rule the shadow does not fully appear on the page. The only ways around this I have found:
Take out overflow: hidden - but then the container DIV doesn't expand down.
Use height / min-height on #container - however this wont work well with all pages on the site.
Use float: left - but then the DIV isn't centered on the page.
Anybody got any more suggestions for this?
You can use one of the many clearfix techniques. That will let you remove overflow:hidden and fix the cropped box-shadow.
Here's a recent article on the topic: http://css-tricks.com/snippets/css/clear-fix/
Pretty sure some margin on the div would solve it, but if you show some more code it's easier to check.
I have a textarea tag that has text I want a user to edit. The textarea tag is wrapped inside a div like so:
div.container {
width: 295px;
max-height: 250px;
overflow: auto;
position: relative;
border: 1px solid: #EEEEEE;
}
textarea {
width: 270px;
height: 100%;
resize: none;
overflow: hidden;
border: none;
}
<div class="container">
<textarea id="overview">
blah blah....
</textarea>
</div>
The div has a fixed width, a max height and shows scroll bars when the height is too large. All this is fine, but how can I get the textarea to expand to 100%? It's currently only two lines tall and doesn't expand to show all the text when I have a lot of text inside it. Please see this fiddle to see what I'm talking about.
Your div.container needs an explicit height specified. Child contents won't expand up to a max-height, just height.
Something like this:
http://jsfiddle.net/dpF7k/
or more simply applying directly to the textarea instead of a wrapping div: http://jsfiddle.net/ujKCf/
The only thing that is missing is that it does not shrink below 250px if there is less content.
The textarea can only expand as big as div#container
While you set your container to be max-height: 250px, it won't expand to that size unless something pushes it. Since your textarea is 100%, it just uses whatever is available.
To see what I mean, just set container to be height: 250px instead of max-height.
Instead, you could use JavaScript to solve this.
This is a jQuery plugin by James Padolsey. It looks like it'd do exactly what you want.
Edit: I thought OP didn't want a scroll bar given his overflow... NVM then