CODEWITHSUNDEEP
jqueryhtmlcsslist
JPashs
JPashs

Reputation: 13886

How to break a html list into colums

Just wondering if a html list could be break into columns based in its positions (using css and/or jquery)

Let say I want to create as many columns as (TOTAL-ITEMS/3).

Then in this list I will get 2 columns.

<ul id="list-1" >
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>
</ul>

In this one I'll get 3 columns.

<ul id="list-1">
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>

  <li>item in third column</li>
  <li>item in third column</li>
  <li>item in third column</li>
</ul>

Since the list is generated by a CSM I can not add custom classes nor id.

Upvotes: 2

Views: 446

Answers (3)

Trung Vu
Trung Vu

Reputation: 531

May I help you.

$(function() {
  var count = $("#list-1 li").length;
  var x = Math.ceil($(count)[0]/3);
  $("#list-1").css({"-webkit-column-count": ''+x, 
                    "-moz-column-count": ''+x,
                    "column-count": ''+x});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list-1">
  <li>item in first column</li>
  <li>item in first column</li>
  <li>item in first column</li>

  <li>item in second column</li>
  <li>item in second column</li>
  <li>item in second column</li>

  <li>item in third column</li>
  <li>item in third column</li>
  <li>item in third column</li>
  
  <li>item in fourth column</li>
</ul>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115145

Absolutely you can add columns like so:

ul {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Jsfiddle Demo

Column-count @ MDN

However, CSS cannot detect the number of li to apply a specific number of columns. You would have to determine that some other way.

There is a JQuery technique as follows:

Credit to this SO Question

$(document).ready(function() {
    var numitems =  $("#myList li").length;    
    $("ul#myList").css("column-count",numitems/3);
    $("ul#myList").css("-webkit-column-count",numitems/3);
    $("ul#myList").css("-moz-column-count",numitems/3);

});

JSfiddle Demo 2

Upvotes: 5

Friendly Crook
Friendly Crook

Reputation: 1198

Just add column-count: 3; to your unordered list

Upvotes: 0

Related Questions