Блог

Главная - Вопросы по программированию - Выпадающий список DOJO CheckedMultiSelect показывает вертикальную полосу прокрутки

Выпадающий список DOJO CheckedMultiSelect показывает вертикальную полосу прокрутки

#javascript #dojo #dijit.form

#javascript #dojo #dijit.form

Вопрос:

Я пытаюсь отобразить вертикальную полосу прокрутки в CheckedMultiSelect (выпадающем) виджете.

Я попытался установить height / overflow-y properties, но по-прежнему безуспешно.

Я включил оба свойства для виджета, т.е. multiple =»true» и dropdown =»true».

Я показываю около 200 элементов, и список выходит за пределы нижней части элемента управления.

Смотрите мой пример кода ниже :

 <select multiple="true"
        dropdown="true"
        name="multiselect"
        data-dojo-type="dojox/form/CheckedMultiSelect">
     <option value="TN">Tennessee</option>
     <option value="VA">Virginia</option>
     <option value="WA">Washington</option>
     <option value="FL">Florida</option>
     <option value="CA">California</option>
     <option value="TN1">Tennessee</option>
     <option value="VA1">Virginia</option>
     <option value="WA1">Washington</option>
     <option value="FL1">Florida</option>
     <option value="CA1">California</option>
     <option value="TN1">Tennessee</option>
     <option value="TN2">Tennessee</option>
     <option value="VA2">Virginia</option>
     <option value="WA2">Washington</option>
     <option value="FL2">Florida</option>
     <option value="CA2">California</option>
     <option value="TN2">Tennessee</option>
     <option value="TN3">Tennessee</option>
     <option value="VA3">Virginia</option>
     <option value="WA3">Washington</option>
     <option value="FL3">Florida</option>
     <option value="CA3">California</option>
     <option value="TN3">Tennessee</option>
</select>

Версия DOJO 1.14.
Любая помощь будет признательна,
-Прашант

Ответ №1:

Вы можете переопределить некоторый стиль css для достижения желаемого результата , изменив height overflow свойства и отображаемый элемент меню как поток

 .dojoxCheckedMultiSelect .dijitMenuTable {
  /* fix some rendering issue menu item width table*/
  width: 100%;
}

.dojoxCheckedMultiSelectMenu {
  /* set scroll-x to scroll and hide y scroll bare*/
  overflow: hidden scroll !important;
  /* set max height for dropdown menu */
  max-height: 150px !important;
}

Вы можете проверить рабочий фрагмент здесь :

 require(["dojo/ready", "dojox/form/CheckedMultiSelect"], function(ready, CheckedMultiSelect) {
  ready(function() {
    console.log("Hi");

  })

}); 
 html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}



.dojoxCheckedMultiSelect .dijitMenuTable {
  /* fix some rendering issue menu item width table*/
  width: 100%;
}

#one_menu.dojoxCheckedMultiSelectMenu {
  /* set scroll-x to scroll and hide y scroll bare*/
  overflow: hidden scroll !important;
  /* set max height for dropdown menu */
  max-height: 150px !important;
} 
 <link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojox/form/resources/CheckedMultiSelect.css" rel="stylesheet" />

<script>
  dojoConfig = {
    parseOnLoad: true,
    async: true
  };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>

<body class="claro">
  <select id="one" multiple="true" dropdown="true" name="multiselect" data-dojo-type="dojox/form/CheckedMultiSelect">
    <option value="TN">Tennessee</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="FL">Florida</option>
    <option value="CA">California</option>
    <option value="TN1">Tennessee</option>
    <option value="VA1">Virginia</option>
    <option value="WA1">Washington</option>
    <option value="FL1">Florida</option>
    <option value="CA1">California</option>
    <option value="TN1">Tennessee</option>
    <option value="TN2">Tennessee</option>
    <option value="VA2">Virginia</option>
    <option value="WA2">Washington</option>
    <option value="FL2">Florida</option>
    <option value="CA2">California</option>
    <option value="TN2">Tennessee</option>
    <option value="TN3">Tennessee</option>
    <option value="VA3">Virginia</option>
    <option value="WA3">Washington</option>
    <option value="FL3">Florida</option>
    <option value="CA3">California</option>
    <option value="TN3">Tennessee</option>
  </select>
  
  <select id="two" multiple="true" dropdown="true" name="multiselect" data-dojo-type="dojox/form/CheckedMultiSelect">
    <option value="TN">Tennessee</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="VA1">Virginia</option>
    <option value="WA1">Washington</option>
    <option value="FL1">Florida</option>
    <option value="CA1">California</option>
    <option value="TN1">Tennessee</option>
    <option value="TN2">Tennessee</option>
    <option value="VA2">Virginia</option>
    <option value="WA2">Washington</option>
    <option value="FL2">Florida</option>
    <option value="CA2">California</option>
    <option value="TN2">Tennessee</option>
    <option value="TN3">Tennessee</option>
    <option value="VA3">Virginia</option>
    <option value="WA3">Washington</option>
    <option value="FL3">Florida</option>
    <option value="CA3">California</option>
    <option value="TN3">Tennessee</option>
  </select>
</body>

Комментарии:

1. Спасибо @Sadhil, все работает нормально!!! один дополнительный вопрос — это относится ко всем виджетам проверки множественного выбора. Есть идеи, как применить это изменение только к определенному виджету? Я пытался добавить #selectId перед css, но не работает.

2. @prashant это просто, укажите идентификатор по примеру #myid для вашего выбора, а затем в css, просто укажите #widget_myid.dojoxCheckedMultiSelectMenu { ... } , чтобы применить стиль только к этому ,

3. также, если вы хотите использовать muliple, просто поместите селектор класса и примените стиль прокрутки к этому классу

4. Спасибо, Садхил, очень ценю вашу помощь

Метки: