Ted Ted - 4 months ago 9
CSS Question

Display ul li items in two columns with a scrolling vertical overflow

I'd like to display two columns of

li
objects within a
ul
, with a fixed height where the items scroll vertically.

I'm creating the columns of
li
objects using the css
columns
rule, but at the moment the result ignores the number of columns I specify, and the
overflow-y
rule, and overflows horizontally instead.

Does anyone know how to get the
ul
to scroll vertically with a 2 fixed columns instead?

Note - I need to keep all the
lis
within a single
ul
as they are being used as part of a
JQuery Sortable
control.

Markup

<ul class="twoColsVerticalScroll">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
... lots of lis ...
</ul>


Css

.twoColsVerticalScroll {
height: 100px;
width: 400px;
overflow-y: scroll;
background-color: red;
-moz-columns: 2 100px;
-webkit-columns: 2 100px;
columns: 2 100px;
}


Result

https://jsfiddle.net/xh4kq0h5/

Answer

Wrap your list in div with overflow: scroll and set its sizes. Then set width of columns to 50%; Don't forget to reset margins and paddings of ul.

Update

Add FF support.

ul {
    padding: 0;
    margin: 0;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-width: 50%;
       -moz-column-width: 50%;
            column-width: 50%;   
}

div {
    width: 420px;
    height: 200px;
    border: 1px solid;
    overflow-y: scroll;
}
<div>
  <ul class="twoColsVerticalScroll">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
  </ul>
</div>