bootstrap multiselect dropdown ширина 100%

Я использую bootstrap multiselect в своем веб-приложении около 9 месяцев. Я стилизация ширины раскрывающегося списка, чтобы быть 100%, как это:bootstrap multiselect dropdown ширина 100%

ul.multiselect-container { 
     width: 100% !important; 
    } 

.dropdown-menu {width:100% !important;}

Я только что получил новую версию, потому что это был дополнительный параметр конфигурации (onDeselectAll). Теперь ширина раскрывающегося списка не равна 100%. Глядя на стиль в консоли элементов, похоже, что мой css должен все еще работать:

На фото css видно, что .dropdown-menu {width:100% !important} переопределяется, но я не уверен, что.

Любые идеи?

источник

2016-08-27 BeniaminoBaggins

Есть ли шанс, что вы можете поделиться сайтом, чтобы проверить или скрипку с кодом? – Sterling

@Sterling изо всех сил пытается получить мультизагрузку bootstrap, работающую в jsfiddle, но здесь она https://jsfiddle.net/u0m6tzsp/1/ – BeniaminoBaggins

Приведенный ниже минимальный пример работает отлично, поэтому Bootstrap Multiselect не переопределяет стиль. Но учтите, что в вашем случае .dropdown-menu и .multiselect-container относятся к тем же самым элементам (ul, как в примере ниже. Поэтому применение стиля к обоим классам, как и вы, не является необходимым и может вызвать то, что вы видите в инспекторе.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#multiselect').multiselect({ 
 
      buttonWidth: '400px' 
 
     }); 
 
    }); 
 
</script> 
 
<style type="text/css"> 
 
    .multiselect-container { 
 
     width: 100% !important; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
    <select id="multiselect" multiple="multiple"> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     <option value="3">Option 3</option> 
 
     <option value="4">Option 4</option> 
 
     <option value="5">Option 5</option> 
 
     <option value="6">Option 6</option> 
 
    </select> 
 
</body> 
 
</html>

источник

2016-09-02 13:15:39

У меня уже была моя работа и я забыл ответить, но ваш пример тоже работает, поэтому это хорошее решение , Мне нужно было добавить «position: relative» в моем конкретном случае: 'ul.multiselect-container { width: 100%! Important; позиция: относительная! Important; } '. Действительно хороший плагин, кстати. Я также добавил теперь избранные optgroups, и он отлично работает. Спасибо за вашу работу! :) – BeniaminoBaggins

Я использовал параметр buttonWidth, что .multiselect дает вам похож на Дэвида Stutz. Тем не менее, я поставил '100%' прямо в параметре.

<body> 
    <select id="multiselect" multiple="multiple"> 
     <option value="1">Option 1</option> 
     <option value="2">Option 2</option> 
     <option value="3">Option 3</option> 
    </select> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#multiselect').multiselect({ 
       buttonWidth: '100%' 
      }); 
     //caret is in the middle, switch it to right 
     $(".caret").css('float', 'right'); 
     $(".caret").css('margin', '8px 0'); 
     }); 
    </script> 
</body>

источник

2017-02-13 22:47:11

bootstrap multiselect dropdown ширина 100%

ответ

Смежные вопросы