I am currently in a situation where I need to do use multi-column layout mode of css.
Basically, I am creating a mega-menu where I need to have variable list items inside unordered list.
For that I need to have four columns and if content from list items are not far enough to fit within four columns, it should just stay within one column. That's why I need to have flexible height on multi-column container.
<ul class="megamenu-list">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
</ul>
and here is the css part.
.megamenu-list {
visibility: visible;
opacity: 1;
column-count: 4;
column-fill: auto;
height: 400px;
padding: 20px;
}
After some googling I come to know that to be able to use column-fill auto, one needs to have constrained(fixed) height on parent container which is not useful as there may be the case when there are only one or two list items within container.
I already tried that thing in my other question with flex but with no luck of getting any response.
Set flex container height to flex items content height when there are only fewer items
Now I found the below discussion at github which seems to be closed but don't know how.
https://github.com/w3c/csswg-drafts/issues/3064
Thanks.
Related
I have created a site that uses flexboxes and it is working in most parts, but I have come across an issue with something.
http://kudos.topspindigital.com/#/table-tennis
If you look at the page, the top right panel is cutting off text. This is because the panels below are set to be 1.5 x the height of the one above.
This works fine for this page:
http://kudos.topspindigital.com/#/archery
but as you can see, anything that has 2 lines of text for the header brings the content down.
So my question is 2 things.
Is there a way I can tell my panels to grow to 1.5 x height of the top but allow the top to expand (and let the children shrink).
I tried doing this:
.flex-double {
flex-grow: 1.5;
flex-shrink: 1;
flex-basis: 0;
}
but it had no effect.
Is there a way of forcing the top panel to overflow and get the bottom panels to fill the remaining height?
ok, so I was having problems with this, so I made a codepen with my CSS and tried to solve the issue myself.
Here is the codepen:
http://codepen.io/r3plica/pen/qdPeYp
I have managed to fix the issue by creating a new class called .flex-auto which replaced .flex-double.
It looks like this:
.flex-auto {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
Applying this to the item I want to be just enough height (in this case the top panel) will set it to the correct height and the second panel will then take up the rest of the space.
Yes. Just set your desired flex factor:
flex: 1.5;
And then the Flexbox module changed the initial value of min-height:
4.5 Implied Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items,
this specification introduces a new auto value as the initial
value of the min-width and min-height properties defined in
CSS 2.1.
So the min-height will compute to the content size, which is exactly what you want.
You can see this behavior on Firefox, but Chrome hasn't implemented it yet.
If you want it to overflow, just unset the min-height and add overflow to the appropriate element:
.row {
min-height: 0;
}
.panel-gray {
overflow: auto;
}
I have such url: http://xn----7sbabhi8cwaajmue5o.xn--p1ai/cars/search/by_man_and_model?by_manufacturer=115
there you could see that i have three columns
i have such troulbe: id="manufacturers-list" if i delete min, and height, i see that my li is separated in different colums
, but how to prevent this?
i didn't get why i get this separation(( why it slice my li?
css:
width: 690px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
overflow: hidden;
The thing that's separating your content into different columns is the CSS column-count property (including the vendor prefixes.)
To explain both your images, the first looks like you have a set height with overflow: hidden which is going to conceal every single list item that flows past that height. If you have 50 list items but your container only has height enough for five, you're not going to see more than five.
The second looks like you've removed your height and given a column property.
I just looked at the site and you might want to remove the display: inline-block style from .man-area, remove overflow-hidden from the outside container (#vip-offers)
And SOMEWHERE you have inline javascript (or styles) giving that parent container a fixed height. I would definitely not recommend giving a fixed height with a hidden overflow. It just doesn't bode well unless you're trying to achieve a specific effect.
I want to do this without JavaScript. I already have a JS solution but want to know if this is possible with pure CSS.
Let's say you have a page showing products off. When the page resizes I want to have those product boxes flex with the page layout. Each one should have a max-width and min-width. A table won't work because I can't have a fixed number of columns. Depending on the browser width, there could be between 1 to 6 products on a single row. The following doesn't work, but it's the closest I've got.
#prducts > div {
float: left;
max-width: 200px;
width: auto;
min-width: 100px;
background-color: #3333FF;
height: 250px;
margin: 5px;
}
Here's the fiddle: http://jsfiddle.net/79CBq/2/
Is it possible to make a DIV do auto width and still adhere to the min/max values I set? Unfortunately width: auto only changes the width if there is content inside making it bigger.
This is just really dumb to me, because a DIV with "display: block" has the right kind of auto-width but I can't find an option to give that to an inline-block or float DIV.
What you want is a grid-system.
For your information: you can set the width of your divs in percentage (based on the width of the parent container).
If you want all <div> elements in #prducts to be 1/6 of the screen width, you should remove the width of prducts (set it to auto) and then do this:
#prducts > div {
width: 16.666%;
}
Beside the typo in #products you should know that you are using the id identifier. You can only have one html element width the id "products". If you plan to have more then one, you should change that to a class name.
I don't really unterstand what you want to do in your fiddle. You should not use tables for layout reasons. With my anweser and your fiddle, you will run into problems width the margin of the > div items, which you could easily avoid using a box based layout.
You can use bootstrap grid system, bootstrap takes care of the media queries. You need to give the div classes such as "col-md- " depending on the columnwidth and the screens you want to support. If you do not want to use the full library you could mimic bootstrap implementation for fluidic layouts.
http://getbootstrap.com/css/
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.
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/