2

I have a html list which is too long for my container and i want to break it and show the extra items in another column. But when i use columns in css it divides the list evenly. Like if i have 12 items then 6-6 in each column. But i don't want to do this. Instead i want it to show only the extra items in the other column.

In the following picture i want to show the items from 9 to 12 in another column.

Please Help.

Css 

.subMenuHolder{
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
}

.subMenu{
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  padding: 30px 30px;
  width: 500px;
  height: 350px;
  -webkit-columns: 250px;
  -moz-columns: 250px;
  columns: 250px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; 
}

.categoryMenu1{
  background: url(/theme/images/pictures/potato-onion1.png) no-repeat;
  background-size: 350px 200px;
  background-position: bottom right;
  background-color: #f2f9fd;
}

.subMenu li{
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

HTML 

<ul class="subMenu categoryMenu1">
  <a class="sub-heading">Category 2</a>
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a></li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a></li>
</ul>

Refer to this Image Please

enter image description here

As you can see in the image the 9 to 12 list items are out of the box. I am unable to bring it inside the box.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Aman Jolly
  • 61
  • 5

4 Answers4

0

You were using the columns property wrong.

You had:

.subMenu{
...
 columns: 250px;
...
}

This property is not looking for the size of a column, it's looking to see how many columns should be generated (as well as other properties: w3 CSS3 Columns Property)

So, when you change this property to "2" (or however many desired columns), I believe we get your intended result:

Fiddle

Side note: in your question you said it was your desire to have 9 rows in the first column and the remainder in the second. I could not find a "column" specific way to do this, so as a hack I adjusted the height of the container. Please see the CSS in the fiddle.

Finally, in the link provided by @AhmetEmre90, there is an IE hack - as older versions of IE won't style this property. I'm including the link and the IE hack for posterity.

Code by: @Gabriel: SO- How to display an unordered list in two columns?

HTML

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

JAVASCRIPT

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}
Community
  • 1
  • 1
Dan Orlovsky
  • 1,045
  • 7
  • 18
0

Based on the information supplied it looks like the container isn't wide enough to hold the columns including the gap and the height needs to be calculated to ensure that the columns break at the right point.

Then the columns need to be unbalanced with column-fill: auto;

Codepen Demo

.subMenu {
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  width: 500px;
  height: 260px;
  -webkit-columns: 180px;
  -moz-columns: 180px;
  columns: 180px;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}
.subMenu li {
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<ul class="subMenu categoryMenu1">
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a>
  </li>
</ul>

As an alternative, perhaps Flexbox.

.subMenu {
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  width: 500px;
  height: 260px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.subMenu li {
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  width: 180px;
}
<ul class="subMenu categoryMenu1">
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a>
  </li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a>
  </li>
</ul>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

To achieve an non-half/half distribution of items in the two columns, you can use a fixed height value for the ul. Actually you are already doing that (in the css rule for .subMenu), so simply adjust the height value in that CSS rule so it fits 8 list items as desired:

(note that I changed the width to better fit it into the snippet window here, which of course probably isn't necessary for the real situation)

subMenuHolder{
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
}

.subMenu{
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  padding: 30px 30px;
  width: 300px;
  height: 280px;
  -webkit-columns: 250px;
  -moz-columns: 250px;
  columns: 250px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; 
}

.categoryMenu1{
  background: url(/theme/images/pictures/potato-onion1.png) no-repeat;
  background-size: 350px 200px;
  background-position: bottom right;
  background-color: #f2f9fd;
}

.subMenu li{
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<ul class="subMenu categoryMenu1">
  <a class="sub-heading">Category 2</a>
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a></li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a></li>
</ul>
Johannes
  • 64,305
  • 18
  • 73
  • 130
-2

You can use the columns property of ul
Check this link for more information.

Community
  • 1
  • 1
AhmetEmre90
  • 501
  • 2
  • 8
  • 23
  • Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Mar 10 '16 at 15:20