Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bootstrap-select overlapped with other drop-down menus #760

Closed
mictadlo opened this issue Oct 13, 2014 · 5 comments

Comments

@mictadlo
Copy link

commented Oct 13, 2014

Hello,
Looking at bootstrap-select examples no overlapping happened between different drop-down menus. However, in my examples all drop-down menus overlapping ( Demo).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>TEST</title>


    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css"href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="/static/web.css">
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">

  </head>


  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/search/">TEST</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapsible">
          <ul class="nav navbar-nav navbar-left">

            <li class="active"><a href="/search/">Home</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-right" method="get" action="/snearch/" role="form">
                <div class="form-group">
                    <input class="form-control" type="text" name="sid" placeholder="e.g. hello">
                    <button class="btn btn-default"><span class="glyphicon glyphicon-search" type="submit"></span>
                    </button>
                </div>
            </form>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>


    <div class="container">

      <form class="form-horizontal" action="/snps/" method="POST" role="form">
  <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1413008961.84##d5f5a444ea1ef9d7ed3268e2e554bde2d2cc21e3"></div>
    <div class="input-group"> 

      <span class="input-group-addon">Test1:</span>
      <select class="selectpicker form-control" data-live-search="true" id="test_select" name="test_name">
            <option value="">--- Select One ---</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
      </select>
    </div>
    <BR/>   
    <div class="input-group"> 
      <span class="input-group-addon">Test2:</span>
      <select class="selectpicker form-control" data-live-search="true" id="test2_select" name="test2_name">
          <option value="">--- Select One ---</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
      </select>
    </div>      
    <BR/>   
    <div class="input-group">   
      <span class="input-group-addon">Test3:</span>
      <select class="selectpicker form-control" data-live-search="true" id="test3_select" name="test3_name">
            <option value="">--- Select One ---</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
      </select>
    </div>      
    <BR/> 
    <div class="input-group">   
      <span class="input-group-addon">test4:</span>
      <select class="selectpicker show-menu-arrow form-control" data-live-search="true" id="test4_select" multiple data-max-options="2" name="test4_names">
            <option value="">--- Select One ---</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>

      </select>
    </div>      
    <BR/>      
    <div class="input-group">
      <span class="input-group-addon">Start position:</span>
      <input class="form-control" id="start_pos" name="start_pos" placeholder="e.g. 200" type="number" value="">
      <span class="input-group-addon">End position:</span>
      <input class="form-control" id="end_pos" name="end_pos" placeholder="e.g. 1000" type="number" value="">
    </div>
    <BR/>    

    <div class="input-group">       
      <span class="input-group-btn">
        <button class="btn btn-default" type="submit">Search</button>
      </span>
    </div>
</form>

    </div> <!-- /container -->

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
  <script>
    $('.selectpicker').selectpicker();

  </script>  
  </body>
</html>

On StackOverflow the suggestion was to to remove z-index:2 from .input-group .form-control class (see JS Fiddle, but the top right corner the search symbol has changed.

How is it possible to fix the problem with overlapping and the search symbol?

Thank you in advance.

@t0xicCode

This comment has been minimized.

Copy link
Collaborator

commented Nov 5, 2014

Would you mind changing the library to version 1.6.3? I've included a fix in there for the z-index, and I'd like to rule that out. 1.6.3 should be on cdnjs before the end of the week.

@xtcsvirus

This comment has been minimized.

Copy link

commented Nov 10, 2014

The problem still exist in 1.6.3 (Last Firefox and Chrome tested). Small solution is only to set the z-index for current set of select elements:

.input-group .bootstrap-select.form-control {
  z-index: inherit;
}

The best solution would be to set the higher z-index for .dropdown-menu.open, but it seems not to work.

@aagouda

This comment has been minimized.

Copy link

commented Jan 4, 2015

I confirm this issue is still exist in 1.6.3 and the above solution works:

    .input-group .bootstrap-select.form-control {
        z-index: inherit;
    }
@t0xicCode

This comment has been minimized.

Copy link
Collaborator

commented Jan 4, 2015

Sounds good. I'll commit that.

@PiyumMadusanka

This comment has been minimized.

Copy link

commented Jun 13, 2018

input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}

remove z-index:2 from this line and it will solve this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.