Hướng dẫn bootstrap multiselect dropdown position - vị trí thả xuống nhiều lựa chọn bootstrap

Question

I have tried to change the Position of bootstrap multiselect dropdown menu on top but no luck. Below instead of using right how to show top of control.

<select id="example-dropRight" 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>

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-dropRight').multiselect({
            buttonWidth: '400px',
            **dropRight: true**
        });
    });
</script>

asked May 21, 2015 at 10:36May 21, 2015 at 10:36

10

You can do like thi way...DEMODEMO

<div class="btn-group dropup" style=" margin: 100px;">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

answered May 21, 2015 at 11:29May 21, 2015 at 11:29

sheshadrisheshadrisheshadri

1,2269 silver badges19 bronze badges9 silver badges19 bronze badges

This is my Answer:

<div class="btn-group dropup" style=" margin: 100px;">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

0

<div class="btn-group dropup" style=" margin: 100px;">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

0

answered May 21, 2015 at 11:42May 21, 2015 at 11:42

Tôi muốn nút menu được làm tròn và khá nhỏ vì vậy tôi đã tạo kiểu cho nó phù hợp (bạn có thể tạo kiểu cho mọi cách bạn muốn, tất nhiên không ảnh hưởng đến chức năng): This function removes the d-none classes from the menu and overlay, activating them. Rather than handling this via ID, it simply takes the second element of the target's (button's) parent and assumes that's the menu. This is the reason that the menu and button are wrapped in an otherwise empty div.

Điều này được xây dựng từ đầu do khó khăn trong việc thay đổi hành vi và kiểu dáng của một lựa chọn bình thường. Phần thường thấy của chọn là một nút đơn giản. Menu Dropdown là một div được ẩn bởi lớp Bootstrap Utility D-none, với làm tròn và bóng được áp dụng thông qua các lớp tiện ích Bootstrap Shadow và Rounded. Các tùy chọn là các hộp kiểm đơn giản với nhãn. Chúng có thể được thay thế bằng các nút radio nếu bạn muốn một hộp chọn đơn phù hợp.

Đây là HTML cuối cùng cho nút và menu

<div>
    <button onclick="dropDown(event);" class="menu-btn" type="button">
        Menu 1 &#9013;
    </button>
    <div class="d-none shadow rounded menu">
        <span class="d-block menu-option"><label><input type="checkbox">&nbsp;
                Option 1</label></span>
        <span class="d-block menu-option"><label><input type="checkbox">&nbsp;
                Option 2</label></span>
        <span class="d-block menu-option"><label><input type="checkbox">&nbsp;
                Option 3</label></span>
    </div>
</div>