Edgar Navasardyan Edgar Navasardyan - 2 months ago 11
CSS Question

Two-column unordered list - keeping each li's content in one column

Best described by example.

I have two issues that I couldn't solve after hours of researching.

1) Stop HTML separating a single li content. For example, we can see that Group C heading in rendered in the first column, and the rest is rendered in the second.

2) Render the OK button so that it is out of the ul - in the left or right corner of the drop-down room.

<div>
<span style='cursor:pointer; float:right'>
<div class="btn-group pull-right">
<button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span>
</button>

<ul style='padding:10px; width:auto' class="dropdown-menu zeon-search-settings-dropdwown-menu zeon-two-columns-ul">
<li class="dropdown-submenu zeon-dropdown-submenu">
<div class='section-heading-3'>Group A</div>
<div>
<label class='zeon-input-label'>
<input id="white_agreements_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
<div>
<label class='zeon-input-label'>
<input id="black_agreements_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
</li>
<li class="dropdown-submenu zeon-dropdown-submenu">
<div class='section-heading-3'>Group B</div>
<div>
<label class='zeon-input-label'>
<input id="cash_payment_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
<li class="dropdown-submenu zeon-dropdown-submenu">
<div class='section-heading-3'>Group C</div>
<div class="row">
<div class="col-sm-1">

</div>
<div class="col-sm-7">
<form>
<label class="radio-inline">
<input type="radio" name="optradio">
< </label>
<label class="radio-inline">
<input type="radio" name="optradio">=
</label>
<label class="radio-inline">
<input type="radio" name="optradio">>
</label>
</form>
</div>
<div class="col-sm-4">
<input class="form-control input-sm" id="inputsm" type="text" placeholder='количетсво дней'>
</div>
</div>
</li>
<li class="dropdown-submenu">
<div class='section-heading-3'>Group D</div>
<div>
<label class='zeon-input-label'>
<input id="full_package_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
<div>
<label class='zeon-input-label'>
<input id="not_full_package_filter" type="checkbox" name="vehicle" checked class='zeon-checkbox' />Choice</label>
</div>
</li>
<li class="dropdown-submenu">
<button id='vendor_list_filter_ok_button' type="button" class="next btn btn-default btn-sm pull-left">ОК</button>
</li>
</ul>
</div>
</span>
</div>

Answer

You can use flexbox for that (You can play with the height of the ul.dropdown-menu, if you add more height the group-c block will move to the left column)

This is the added css:

.open>ul.dropdown-menu {
  display: flex;
  width: 400px !important;
  flex-wrap: wrap;
  flex-direction: column;
  height: 250px;
}
ul.dropdown-menu li {
  width: 50%;
}

Here is the working jsfiddle:
https://jsfiddle.net/p6yf17du/

Update

If you don't care (or if you can change the markup) about the order of the elements you can use:

.open>ul.dropdown-menu {
    display: flex;
    width: 400px !important;
    flex-wrap: wrap;
}

This will change the order of your elements from

A | C
B | D

to

A | B
C | D

However, this way you don't need to set the height of the menu (only the width, which makes sense to me).

You can check here:
https://jsfiddle.net/m0rg1uoe/

Comments