I'm creating web app and I'm stuck so I need your help.
So, user can dinamically create <ul> which appears in container, everything is ok until number of unordered lists exceeds the width of container, then those lists starts to appear under already created lists, but I want them always on top of container and when user needs more space to store all list horizontal scrollbar should appear. I already placed overflow: auto; in my container but it only works for vertical scrollbar.
<div class="columns columnsPrivate">
... some simple unordered lists with couple list items which I append using javascript
</div
So my question is, how to force those unordered lists to appear on top of 'columns' class, and when I say on top I mean position: relative: top: 0px;, without placing them below already created lists.
Try
ul {
overflow: auto;
white-space: nowrap;
}
http://jsfiddle.net/AyjZf/
This one's answered here, be sure to do a little more research next time :)
Use overflow-x: auto; for horizontal scrollbars.
Related
I have a table-like structure made out of different divs (and not the html tag). (kind of like an excel view).
I want to implement the fixation of the top row (header) and the first column (has some actions).
All my actions are in one view. Every row with data is a separate view and the header is a separate view.
I have presently applied position: sticky/-webkit-sticky and top: 0/left:0 as required.
This has been able to fix my problem in most browsers. However, Safari is behaving very abnormally.
My left column gets to stay fixed, but the top column on scrolling goes out of the viewPort.
Can anybody suggest some other fix or a Safari related fix?
Please find images attached below:
Sticky can be finicky. If you showed us relevant html/css it would be easier to offer solutions.
Is there a reason you can't use position: fixed; instead of sticky? unless the sticky elements are only sometimes sticky, then fixed should work.
Or maybe set the body 100% width and height, overflow: none; and then set the area you want scrollable to 100% height with overflow-y: scroll or 'auto'.
Edit: Based on your comments below.
I think I have a better idea about what you are trying to do. You want the left column to scroll up/down with the rows, but not left/right. position: sticky; may be the only way to achieve that other than javascript.
I think you should take the top row out of the equation though. Put the whole thing in one container, then setup nested containers within that. There are lots of different ways to structure it. Because position: sticky; gets positioned relative to the nearest scrollable ancestor.
I made a jsfiddle to show one possible method. https://jsfiddle.net/c9kaz854/4/ I can't test it in safari right now, but maybe you can test it, and maybe it can give you some different ideas.
I would suggest you make the same sort of structure you are going for in a simplified format. Start with a clean html file and basic css reset file. Build the basic structure and tweak it until you have something that works consistently across the browsers you need to support. Then use that basic pattern in your full site.
Because position: sticky; has inconsistent implementations in some browsers, a possible workaround for your situation could be to put the element in an <iframe>, <object> or <embed>. Then you could used position: fixed; in a more limited context.
To make that work though, you would put the top row above and outside the iframe, and all the scrollable content inside the iframe (left column and all but top row). Just have left column (inside iframe) be 'fixed.' Put the iframe in a div with overflow-y: scroll; (or auto), and make the iframe itself taller than its container div, so for vertical the scrolling happens outside the iframe, and the whole iframe element scrolls within the containing div, including the left column which is fixed inside the iframe. Then put a class on the iframe source's html/body elements and limit their width with width: 100%; (size of the container) and give them overflow-x: scroll; (or auto), so the the horizontal scrolling happens within the iframe where the left column is fixed and won't move.
I am trying to float to right this menu list that will be dynamicaly loaded from a database, so I can't use a fixed height to the div containing the list as the list may may be longer than expected.
I have tried height="auto" for the containing div but it dont work once you float the list.
here is the code http://jsbin.com/iyitom/1/edit
The CSS attribute overflow is your friend here. You'll want to add overflow: hidden; to .newscontent
I have have some dynamically created divs in a fixed width parent div and I would like to have them distributed horizontally. As they are dynamically created so I wont know how many are in the container unless I count them with JS, which I am trying to avoid.
I was originally trying out the "Using inline-block and justified text" technique on this page; however it seems to behave a bit erracticly when there are more children than will fit ( ie when there are two rows ), ( see the second row here ) so I don't think that will work.
*Edit: Actually I just realise now that it's not actually erratic, it IS spacing the second line correctly, but what I want instead (in this particular instance anyway ... ) is for the three red boxes on the second line to take up positions under the first three of the first line, leaving two positions free at the end, rather than spacing them out too ) .... so I think in general this technique is not likely to ever work for me.
Are there any suggestions of other ways to achieve the above. I would rather not have to use JS but if there is no other way then I am open to suggestions.
It's not failing, that's the native behaviour of floats.
If you want more to fit per line, made the container bigger or the boxes narrower.
If you don't want them wrapping at all, add overflow:auto to your container's CSS and you'll get a scroll bar.
You need to make remove the width of your container and add display: inline-block; to allow the dic container to have a width of whatever the content inside has. Also add overflow: auto; in order for the div to size to the amount of generated divs in it
#container {
display: inline-block;
background:olive;
overflow: auto;
height: 180px;
}
Perhaps use relative widths rather than fixed widths for the interal divs....
#testcontainer div {
width: 19%;
height: 30px;
display: inline-block;
background: red;
float: left;
margin: 2px;
}
DEMO
I ended up conceding that I need to use JS. I added id's to the fourth child and then in CSS I was able to remove the margin from the fourth child ( all of this I presume could have been done in CSS using nth child if I hadn't needed IE8 support ).
Edit: Finally ended up getting what I want - http://jsfiddle.net/byronyasgur/kUgBA/14/
Take a look here: http://jsfiddle.net/Nvntm/1/
The "Support" navigation item actually disappears on Firefox (and other similar browsers), leaving only the other three navigation items. Why is this so? Am I doing something wrong here?
There is not enough width in the containing <ul> for all the child <li> items. Are you able to increase the fixed width to 670px?
The reason for that is probably due to different browser's different default CSS for elements. Do you have a good "reset" CSS in your app?
Changing the nav css to show the overflow demonstrates that the nav items are simply being wrapped to the next line.
Fix this by increasing the width past 660px (exact working value for your example is 668px):
.nav_centered ul {
overflow: visible;
width: 668px;
Keep overflow on while you are adjusting the width to see the wrapped contents, otherwise you can turn it back off. It is purely to help with visualization. Hope this helps :)
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.