Ted Ted - 4 months ago 12
CSS Question

Display li items in two scrolling columns within a ul

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

  • Item 1

  • Item 2

  • Item 3

  • Item 4

  • Item 5


  • ... lots of lis ...


    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>