i have a that contains a HORIZONTAL menu. the menu consists of an unordered list.
i would like the div to get a horizontal scroller whenever the menu exceeds the width of the <div>.
i tried using these CSS definitions for my <div>:
position: absolute;
width: 380px;
overflow: auto;
overflow-y: hidden;
height: 30px;
but than realized that since the menu is LIST, the different list items break the line whenever they reach the width of the <div> and move on to the next line, thus the browser doesnt see the need for a horizontal scroller (it doesnt display a vertical one as well because of the overflow-y: hidden; line)
any ideas how i can create a 1 line horizontal menu which will scroll horizontally only?
thank you all so much.
You might be able to use the white-space property to prevent wrapping. It's hard to know if it's applicable in your case without more code.
For your div, try:
white-space: nowrap;
As far as I know, there's no CSS-based workaround for this. However, you can use Jquery to solve it.
I made a little test for you to see:
http://sotkra.com/stackoverflow/cssdilemma/cssdilemma.html
The first example has 6 or so li's which exceed the width of the container div which means you DON'T need a scrollbar.
The second example has 8-9 li's which DO exceed the width of the container div which means you DO NEED a scrollbar.
Basically, you use Jquery to count the number of li's inside your div using size(). If they exceed X number, in my example's case 6 (the limit before scroll is needed), then a class is added to the ul to extend its width (.longer) so that there's no line break and the horizontal scrollbar appears.
It also adds another class (.taller) that increases the height to accomodate the scrollbar itself.
Cheers
G.Campos
You need to put one massive horizontal div inside the parent div with overflow: auto;
This will allow the to float left without wrapping to the next line, and it will only scroll when the boundary of the parent div is crossed.
Related
https://jsfiddle.net/rafaelfndev/h63r4mye/
Is it possible to show a tooltip over a container with overflow set to hidden?
I know that is possible using position: fixed (green container has property overflow: hidden).
I made 2 examples, the problem is when scrolling...first the button scrolls together with the frame, and second, the tooltip scrolls together with the frame.
I need put these boxes inside the container with overflow: hidden and show the tooltip when hovering (however, the tooltips are hidden by the overflow: hidden of the container).
Is it possible do this using only CSS?
The way to do that is to set it's parent position="absolute" not relative. so the tooltip won't be positioned relative to it's parent and can exceed the container.
But for your case it will take your design down so i suggest you to do one of these:
easily add a padding-top: 40px; to the container so the tooltip can show up at top. and it's better to set a padding-bottom: 40px; as well to make it asymmetric.
OR don't put the tooltip above the items, put them next to them at left which i also recommend you.
I have a table with two columns. I want the first column to be scrollable, so that my table can stay at a fixed height and not expand continuously. I only want it to be scrollable vertically though: Horizontally the overflowing parts should still be visible (In my case, the overflowing parts are on-hover tooltips which are getting hidden and add a horizontal scrollbar...), without having to scroll horizontally. My CSS/HTML looks like this:
<table class"tab1">
<td class="td1"><div class="container"><!-- Many, many, many floating elements here --></div></td>
<td></td>
</table>
CSS:
.tab1 {
table-layout: fixed;
width: 100% /*100% of the parent node*/
height: 20em;
}
.td1.container {
overflow-y: scroll;
}
2 Problems:
The height of 20em gets ignored. Even though the first column now gets a scrollbar, it still expands to its own needs.
When hovering over one of my elements, which generates a div with position:absolute, a horizontal scrollbar appears and the part of the tooltip that overflows gets hidden.
How can I fix this?
PS: The code is simplified of course, but I hope that it still illustrates my problem well.
PPS: Here is a JSFiddle: jsfiddle.net/pg0cLpjd
This question is even more difficult than I thought...
But here is a partial solution:
table-layout: fixed; only applies to the table itself and its columns; not the height. A table will always grow with its content. But there are a couple workarounds:
Set your table to display: block;, give it a specified height and set its overflow-y: scroll; (This also might solve your second problem, depending on your needs)
Place a div with a specified height around your table and set overflow-y: scroll;. The table still grows inside the div but you have a scrollbar.
Place a div in your columns with a specified height and set overflow-y: scroll;. This differs from the first attempt only in the position of the scrollbars and you can scroll every cell independently. But this has one huge disadvantage, which I am going to explain now:
As this answer says: If you set one overflow direction to something else than visible, the other overflow direction will automatically set to auto. (it's a feature, not a bug). And this is exactly where the second problem lies. Your code has the right logic, but it's just not possible. There are solutions using a wrapper div, (it didn't work for me) but you could give it a try.
I'd recommend having a look on how to make tooltips with JavaScript. There are plenty tutorials out there on the internet.
I'm designing a fullscreen website, using javascript to set the height and the width of my sections.
I'd like to have, at the bottom of each section, a diagonal separator.
Now, here's my issue:
In order to display the diagonal divs, i need to have overflow set to auto on the container, but if it is auto, the full website scroll to the right as the diagonal div is bigger than the body.
I need the container to have an overflow:hidden, but still be able to see the diagonal dividers.
You can see what i'm talking about here:
http://codepen.io/anon/pen/emoLpd
If you uncomment out //overflow:hidden from div.website-section you will see that the diagonal is not visible anymore.
How can i have the overflow hidden and the diagonal divs displayed at the same time?
Thanks in advance for any help.
PS: sorry for the tons of code, but i'm developing using less and i pasted the full code.
Here's a working example, forked from your example: http://codepen.io/anon/pen/jERvrE
No need to set overflow:hidden on the .website-section divs. You can simply set overflow-x: hidden on the body element, which keeps horizontal scrollbars from appearing but leaves vertical scrolling unmodified.
This is the important part:
body {
overflow-y: auto;
overflow-x: hidden;
}
I have a div which pops up into the middle of the screen and is populated with some arbitrary content. I need it to scroll if the content added doesn't fit within the space available.
The basic styling is left: 25%; width: 50%; max-height: 70%
If the screen is big enough it all works fine. In Firefox, if there's not enough space, it also works nicely, adding a vertical scrollbar to the division. But in IE, it adds an annoying and unrequired horizontal scrollbar, and I can't figure out a way to get rid of it.
You can see some screenshots of what I mean here:
http://dl.dropbox.com/u/15633144/popup.html
Sorry I can't post the actual HTML, which certainly doesn't make this any easier! But I'm hopeful this is a standard problem which people have worked around before.
The usual solution posted on here plenty of times is overflow-x / overflow-y. But in some cases the div contents do actually need to scroll horizontally, so I can't use this technique.
First IE don't support max-height CSS property.
And the horizontal scrollbar will show up if some elements inside your container have a width overflowing. You probably have some elements inside with a width:100%. As IE adds random borders/margins here and there, the width of inside elements become larger than its container.
try looking here
CSS div element - how to show horizontal scroll bars only?
I'm afraid that because you said that sometimes you need to scroll then you will need horizontal scrollbars. Which if you hid them by overflow-x: hidden; wouldn't allow you to scroll. You could work a jQuery If statement and say if window.width was more than the width of your content, show the scrollbar, if not, then hide it!
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.