I'm having some issues with using columns in CSS. I wanted to set column-count: 6; but it result only in 5 columns. It seems to be working fine for values <=5 but when I try to set something higher it produces weird results. Column-count doesn't match.
.columns {
column-count: 6;
}
.columns__item {
display: inline-block;
background: #fff;
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
<ul class="columns">
<li class="columns__item">Item 1</li>
<li class="columns__item">Item 2</li>
<li class="columns__item">Item 3</li>
<li class="columns__item">Item 4</li>
<li class="columns__item">Item 5</li>
<li class="columns__item">Item 6</li>
<li class="columns__item">Item 7</li>
<li class="columns__item">Item 8</li>
<li class="columns__item">Item 9</li>
<li class="columns__item">Item 10</li>
<li class="columns__item">Item 11</li>
<li class="columns__item">Item 12</li>
<li class="columns__item">Item 13</li>
<li class="columns__item">Item 14</li>
</ul>
Here is the fiddle: https://jsfiddle.net/btqxd20r/1/. I'm testing it in Chrome.
It might be the display: inline-block; issue, Increase your items to 40 or 50 and then check, it works correctly.. here is the updated fiddle https://jsfiddle.net/btqxd20r/2/
UPDATE:
Use float: left set width in pixels to display your items in a rows and if you want to make it responsive for devices. Keep in mind that you should use clear:both css after ending of float divs...
Related
I wanted to ask how I would go about achieving the results mentioned in the title?
This is different to the other answers as those answers don't use the display: grid; styling as mentioned in the answer below:
<ul class="item">
<li class="headings">Heading 1:</li><li>Value 1 </li>
<li class="headings">Heading 1:</li><li>Value 2</li>
<li class="headings">Heading 3:</li>
<li class="headings">Heading 4</li><li>Value 4</li>
<li class="headings">Heading 5</li><li>Value 5</li></ul>
</ul>
I know the correct way to accomplish this would be to have a new unordered list for every 2nd list item, but for some reason the car-row outputs all the list items within a single unordered list.
You can use display grid. Something like this:
.item{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
<ul class="item">
<li class="headings">Heading 1:</li>
<li>Value 1</li>
<li class="headings">Heading 1:</li>
<li>Value 2</li>
<li class="headings">Heading 3:</li>
<li>Value 3</li>
<li class="headings">Heading 4</li>
<li>Value 4</li>
<li class="headings">Heading 5</li>
<li>Value 5</li></ul>
</ul>
Or
You can change ul default behaviour, Something like this:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
I'm trying to create a mega-menu. I'm using a list element and some elements have divs inside.
This is what my HTML looks like:
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
The li with .list-item class has position:relative; and the .sub-menu-wrapper has position:absolute; and width:100%;
i need the .sub-menu-wrap to have a full screen width but it's only taking the li.list-item width (screenshot below).
I also tried left:0;right:0; for .sub-menu-wrap but nothing changed..
When recreating your code, the element positioned absolute does in fact take up 100% width when the width is set to 100%. Double check your syntax. See my snippet below, the element positioned absolute is taking up the full width.
.list-item{
position: relative;
background: lightcoral;
width: 100px;
}
.sub-menu-wrap{
position:absolute;
background-color: lightblue;
width: 100vw;
}
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
I have a web page that displays a list of item with variable length. There are two panels at the top of the page that display information about the selected item from the list. Both or just one can be hidden by the user to see more items in the list. If the panels are displayed, I need them to be fixed - even when scrolling through the list, they are always visible. If the user hides some panels, I want the list of items to move to the area where the fixed panel was.
The situation is shown in the picture. The green and yellow panels must always be seen until the user hides it. The list must move according to space above.
Is there a possibility to do this with HTML and CSS?
Yes. You can put your list inside a div and set the div to have a fixed height as well, then the items below will be scrollable.
See this example (jsfiddle):
.panel-1, .panel-2{
height: 100px;
}
.panel-1{
background: red;
}
.panel-2{
background: blue;
}
.list{
height: 200px;
overflow-y: auto;
}
.list-group{
background: rgba(0, 0, 0, 0.1);
list-style: none;
padding-left: 0;
}
.list-item{
margin: 5px 0;
padding: 5px 0;
background-color: yellow;
}
<div>
<div class="panel-1">Information</div>
<div class="panel-2">More information</div>
<div class="list">
<ul class="list-group">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
<li class="list-item">Item 6</li>
<li class="list-item">Item 7</li>
<li class="list-item">Item 8</li>
<li class="list-item">Item 9</li>
<li class="list-item">Item 10</li>
</ul>
</div>
</div>
I've done a few things with css columns and I really like them, but today I stumbled into a problem for which I just won't find a solution:
I have a page with multiple lists. These lists have dynamic contents and open up in small popups. The old behaviour was, that the list contents have been shown in a single column (normal HTML <ul>). The new behaviour should be that they are displayed in up to 4 columns. So I have extended my CSS with ul { column-count: 4; }. This works pretty nice for lists with many entries.
Now to my problem: sometimes there are lists with less then 4 entries. If that's the case, the popups for the lists still span 4 columns, with only 2 columns filled. So the popup for the less-filled list is still as wide as a popup with a full-filled list. For example:
ul {
background-color: lime;
list-style: none;
column-count: 4;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
My question now is: How do I hide those empty columns? I want a popup with a less filled list (no. of entries < 4) to be less wide then a popup with a full-filled list. I'd like to find a CSS-only solution, as I didn't intend to count the entries and add extra classes to decrease the column-count.
The order in which the elements are displayed is important: top-down and then left-right.
I've tried using flexbox, but there I have to set a fixed width for the container, which just results in the popups being too wide as well.
Edit for clarification:
The dotted line should be the right border for the second popup.
The diagonal lines mark the empty space I need to be gone.
Edit further approaches:
Another approach posted by user 'Gobbin' as answer, is to use flex. But as I mentioned, I'd have to set some fixed width. Here it is a max-width for the list itself, so that wrapping works and a fixed width for the list elements. I don't want to have either. Also this approach lists the items from left to right and then from top to bottom, which is also not what I need:
ul {
list-style: none;
display: inline-flex;
flex-wrap: wrap;
max-width: 16em;
float: left;
clear: both;
}
li {
background-color: lime;
width: 4em;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
<li>entry 7</li>
<li>entry 8</li>
<li>entry 9</li>
<li>entry 10</li>
<li>entry 11</li>
<li>entry 12</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
Maybe this is an option for you, although the columns are spread across the available width.
var maxColumns = 4;
$("ul").each(function() {
var numColumns = $(this).find("li").length;
$(this).css("column-count", numColumns);
$(this).css("width", 25*numColumns + "%");
});
ul {
background-color: lime;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
I think this is your desired layout. Edited my answer as the list items still had margins.
ul {
list-style: none;
display: inline-flex;
float: left;
clear: both;
}
li{
background-color: lime;
width: 100%;
display: inline;
}
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
looking for some code to wrap a li items in a div with a set height.
When list items dont fit the height it will spill over to the right.
also looking to align them to the left of that div with bullet point still visible.
would also be nice if you would be able to control the "space" in between so it doesn't look squished.
I wrote the code how i would like it displayed knowing it wont. hopefully it helps to explain what i am after.
<div>
<ul>
<li> 1</li> (space) <li> 4</li> (space) <li> 7</li>
<li> 2</li> (space) <li> 5</li> (space) <li> 8</li>
<li> 3</li> (space) <li> 6</li> (space) <li> 9</li>
</ul>
</div>
You can use column-count for this. Check snippet below..
for detail you can take reference from https://www.w3schools.com/css/css3_multiple_columns.asp
ul {
list-style: none;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
ul li {
display: block;
padding: 10px 0;
}
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
<li> 6</li>
<li> 7</li>
<li> 8</li>
<li> 9</li>
</ul>