How to change the Bootstrap multiselect dropdown position on top?

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>

I think menu is in right because of id "example-dropRight". May be it is aligned based on this id. Check bootstrap for drop-downs that aligned to top. — Reshma Reghunatha Panicker, May 21 '15 at 10:41
hi Jacky, yes i want to show it above the control that is in top. if you not use dropright it show center down.I like to know how to show it in top. — Santhose Kumar, May 21 '15 at 10:43
Jack I cant able to find it. I tried the CSS for that also but no luck. — Santhose Kumar, May 21 '15 at 10:46
The .dropup class is used to indicate a dropup menu. http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_comp_dropup&stacked=h — Parkash Kumar, May 21 '15 at 10:59
I think you have to change "example-dropRight" id and use something else. — Reshma Reghunatha Panicker, May 21 '15 at 11:23
Awesome Parkash Kumar, I tried .dropup class its working fine Thanks a lot. -----awesome help — Santhose Kumar, May 21 '15 at 11:38

score 1 · Answer 1 · answered May 21 '15 at 11:29

You can do like thi way...DEMO

<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>

score 1 · Answer 2 · answered May 21 '15 at 11:42

This is my Answer: <div class="**dropup**"><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> </div>

How to change the Bootstrap multiselect dropdown position on top?

2 Answers2