Лучше всего описывается примером.

У меня есть две проблемы, которые я не смог решить после нескольких часов исследований.

1) Остановите HTML, разделяющий содержимое одного li. Например, мы можем видеть, что заголовок группы C отображается в первом столбце, а остальные - во втором.

2) Визуализируйте кнопку OK так, чтобы она находилась вне ul - в левом или правом углу раскрывающейся комнаты.

<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>
css
1
Edgar Navasardyan 6 Сен 2016 в 22:35

3 ответа

Лучший ответ

Вы можете использовать для этого flexbox (вы можете поиграть с высотой ul.dropdown-menu, если вы добавите больше высоты, блок group-c переместится в левый столбец)

Это добавленный css:

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

Вот рабочий jsfiddle:
https://jsfiddle.net/p6yf17du/

Обновить

Если вам все равно (или если вы можете изменить разметку) порядок элементов, которые вы можете использовать:

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

Это изменит порядок ваших элементов с

A | C
B | D

К

A | B
C | D

Однако таким образом вам не нужно устанавливать высоту меню (только ширину, которая имеет смысл для меня).

Вы можете проверить здесь:
https://jsfiddle.net/m0rg1uoe/

2
Dekel 6 Сен 2016 в 20:23

Вы можете попробовать решить эту проблему, добавив к последнему элементу <li> свойство column-span. Применение этого правила со значением all заставит последний элемент <li> покрыть все столбцы.

Например, см. Следующий код:

HTML:

...
<li class="dropdown-submenu btn-confirm">
    <button id='vendor_list_filter_ok_button' type="button" class="next btn btn-default btn-sm pull-left">ОК</button>
</li>
...

CSS :

.btn-confirm {
  -webkit-column-span: all;
          column-span: all;
}

Как только последний элемент покроет оба столбца, заголовок Group C будет отображаться правильно.

Вы можете найти живую демонстрацию здесь.


Внимание : свойства column и column-span имеют некоторые проблемы в разных браузерах. Посетите веб-сайт caniuse и проверьте поддержку браузеров.

2
Danibix 6 Сен 2016 в 20:11

Попробуй это

.zeon-dropdown-submenu {
    margin-top: 10px;
    min-height: 100px;
}
0
Kumar Nitesh 6 Сен 2016 в 20:09