Bootstrap dropdown cut off behined scrollable cont

问题:

I am facing an Issue with Bootstrap Drop Down. My dropdown is inside a scrollable div with fix height.

When I click on the dropdown, menu appears behind the scroll content. While normal select works perfectly fine.

Here is the Fiddle which demonstrates the issue I am facing.

I tried by applying position: fixed to .dropdown-menu class but that is also not working.

Is there any work around without using JQuery ?

回答1:

As the drop-down has CSS position: absolute and it is under a container which has CSS position: relative. Thus solution is difficult(but possible) using z-index.

However, solution would be easy using position: fixed with proper calculations of its parent's top offset value.

$('.btn-group .dropdown-toggle').click(function(){
    var topPos = $(this).offset().top + $(this).outerHeight();
    $(this).siblings('.dropdown-menu').css({'position':'fixed', 'top':topPos, 'left':'auto'});
})

Check out modified JSFiddle.

Soution 2- (If you can edit HTML of source)

Easiest would be to modify the source HTML like below

<select class="form-control">
    <option selected>Default</option>
    <option>1</option>
    <option>2</option>
</select>

Check this example

回答2:

You are using bootstrap dropdown. What you need is bootstrap select.

<div class="form-group">
  <select class="form-control" id="xyz">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

回答3:

hello brother as samir bhosle mentioned how to use the select but my question is what kind of css you want to put on the options which are not working on bootstrap while i tried somthing which might help you check this fiddlefiddle

    <select type="button" class="btn btn-default">
       <option class="text-success">1</option>
       <option class="text-danger">2</option>
       <option class="text-primary">3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
       <option>7</option>
     </select><br>

this is what i did and its working fine