Bootstrap Take Full Width for Select Drop Down

Bootstrap select width, content too wide when resizing window

Option 1: You can add width:auto to the select, although then it will always size to fit the longest content, and ignore your col class. See the snippet:

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate><div class="well"><div class="form-group">    <label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>    <div class="col-xs-2">        <select class="form-control" style="width:auto;">            <option>Short            </option>            <option>Medium lenght            </option>            <option>Much much much longer text not fitting when resizing            </option>        </select>    </div></div></div></form>

How to make width of dropdown-menu equal to width of it's parent in bootstrap 4

dropdown-menu has position:absolute property. So, adding width:100%; will make the dropdown-menu to take full width of the page instead of taking full width of container. To make the dropdown-menu take the width of it's parent element make the parent element's positioning relative. To solve the problem first Add class="position-relative" attribute to the parent element of dropdown-menu. Now add w-100 to the class attribute of the dropdown-menu div.

<div class="container position-relative">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
  dropdown
</button>
<div class="dropdown-menu w-100">
  <a href="" class="dropdown-item">one</a>
  <a href="" class="dropdown-item">two</a>
  <a href="" class="dropdown-item">three</a>
  <a href="" class="dropdown-item">four</a>
</div>

How to make a Bootstrap 4 full width dropdown in Navbar?

Use w-100 (width:100%) on the dropdown-menu, and make sure the parent .dropdown
is position-static to allow the menu to expand to full width...

<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#" style="color: red;">LOGO GOES HERE</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item dropdown position-static">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
                <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/0QHWWNsMyI

Alternative, set min-width in CSS:

https://www.codeply.com/go/fClz4WpC8u/bootstrap-4-dropdown-width

Complex "mega menu" example

Bootstrap 4 dropdown with full width in Mobile

Option 1 the dropdown is contained in the col-10. You could use col-md-10 instead so that the containing col is full-width on mobile? (no extra CSS changes)

<div class="container">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-10">
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="col-2"></div>
  </div>
</div>

https://jsfiddle.net/3jq0ozfs/

Option 2 is to position:static the containers (dropdown & col-10). This will keep the col-2 and col-10 the same. (no extra CSS changes)

  <div class="row">
    <div class="col-2"></div>
    <div class="col-10 position-static">
      <div class="dropdown position-static">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu ml-1">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="col-2"></div>
  </div>

https://jsfiddle.net/xsv1d6u5/1/

Bootstrap full width dropdown menu

remove display:flex from .nav > li.dropdown.show .dropdown-menu { ( and text-align:center too )and add display:inline to your links 

.nav > li.dropdown.show .dropdown-menu {
  /* display: flex;*/
  border-radius: 0px;
  width: 100vw !important;
  /*text-align: center;*/
  left: 0;
  right: 0;
}

.dropdown-menu > a {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  display: inline;
}

here's a fiddle : https://jsfiddle.net/28g9f3ko/6/

use media-queries to restore the full width on mobile if you want

Bootstrap dropdown is not full width

I did the following:

.input-control {
    border:none; /* Remove border bottom */
}

.dropdown, .dropup {
    border-bottom: 1px solid #696969; /* Add bottom border to drop down instead */
}

.dropdown-menu {
    width:100%; /* Make drop down 100% width OPTIONAL */
}

I put an optional 100% width on the drop down menu incase you wanted the border to match.

UPDATE:

Having the button full width would help usability as well.

.input-control {
    width:100%;
    text-align:left;
}

Bootstrap-Select width in form

I was able to get it to work once I straightened out some external dependencies. One thing to pay attention to is the versions required. JQuery 1.8.0+ and bootstrap version 4 didn't work for me. I was able to get it to work with 3.3.6.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script data-require="jquery@1.10.0" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" />
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>
  </head>

  <body class="container">

      <div class="form-group">
        <label for="test0">test</label>
        <input id="test0" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label for="test1">drop down</label>
        <select id="test1" class="form-control" type="text">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
          </select>
      </div>
      <div class="form-group">
        <label >test 1</label>
        <select id="test2" class="selectpicker form-control" multiple>
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
        </select>
      </div>
  </body>

</html>

Check out the Plunker example

bootstrap 4 full width dropdown menu

For this you have to remove parent css position:relative. I have added some css please check.

.navbar  .dropdown{
  position: static;
}
.navbar{
  position: static!important;
}

.dropdown-menu {  min-width: auto;  width: 100%;  height: auto;  text-align: center;  border-radius: 0;  border-width: 0px;  margin-top: -1px;  padding: 0 0;  max-height: 700px;  overflow: auto;}
.dropdown-menu hr {  border: 0;  border-top: 1px solid rgba(0, 0, 0, 0.1);}
.dropdown-menu ul>li {  padding-top: 0px;}
.material-tab {  margin: 0 auto;  width: 100%;  border-bottom: 0px;  padding: 0 50px;}
.header-inner {  padding: 15px 0;  min-width: auto;  margin: 0 auto;}
.tab-header {  background: #EB3137;  padding: 0 15px;  color: #fff;  -webkit-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);  -moz-box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);  box-shadow: 0px 3px 5px 0px rgba(194, 194, 194, 1);}
.nav.nav-tabs>li>a:focus,.nav.nav-tabs>li>a:hover {  background: transparent;  outline: 0;}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:active {  background: transparent;  color: #FFF;  cursor: default;  border: 0;}
.nav-tabs>li>a {  position: relative;  color: rgba(255, 255, 255, 0.7);  border: 0px;  font-weight: bold;  padding: 12px 15px 14px 15px;}
.nav-tabs>li>a:hover {  color: rgba(255, 255, 255, 0.8);  background: transparent;}
ul.nav-tabs>li.active>a:after {  display: block;  content: '';  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 4px;  background: white;}
.tab-content.white-bg-tabs {  padding: 15px;}
.tab-content.white-bg-tabs .tab-pane {  max-width: 960px;  margin: 0 auto;  background: white;  padding: 10px;  text-align: center;  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  color: #ddd;}
.list-inline h6 p {  font-family: "Raleway Bold", sans-serif;  text-align: left;  color: #000;}.navbar  .dropdown{  position: static;}.navbar{  position: static!important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<header>  <div class="container">    <div class="row">      <nav class="navbar navbar-default">        <ul class="nav">          <li class="nav-item">            <a class="nav-link active" href="#">Active</a>          </li>          <li class="nav-item dropdown">            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>            <div class="dropdown-menu">              <ul class="nav nav-tabs animation" role="tablist">

                <li class="active"><a href="#cars" role="tab" data-toggle="tab">Cars</a></li>                <li><a href="#vans" role="tab" data-toggle="tab">Vans & Pickup</a></li>                <li><a href="#suv" role="tab" data-toggle="tab">SUVs & Crossover</a></li>                <li><a href="#mpv" role="tab" data-toggle="tab">MPVs</a></li>                <li><a href="#hybrid" role="tab" data-toggle="tab">Hybrid</a></li>                <li><a href="#performance" role="tab" data-toggle="tab">Performance</a></li>              </ul>
              <!-- Tab panes -->              <div class="tab-content white-bg-tabs">                <div class="tab-pane active" id="cars" role="tabpanel">                  00. SOME ITEM w IMAGE / LIST HERE                </div>
                <div class="tab-pane" id="vans" role="tabpanel">                  0. SOME ITEM w IMAGE / LIST HERE                </div>
                <div class="tab-pane" id="suv" role="tabpanel">                  1. SOME ITEM w IMAGE / LIST HERE                </div>
                <div class="tab-pane" id="suv" role="tabpanel">                  2. SOME ITEM w IMAGE / LIST HERE                </div>
                <div class="tab-pane" id="mpv" role="tabpanel">                  3. SOME ITEM w IMAGE / LIST HERE                </div>
                <div class="tab-pane" id="hybrid" role="tabpanel">                  4. SOME ITEM w IMAGE / LIST HERE                </div>
                <div class="tab-pane" id="performance" role="tabpanel">                  5. SOME ITEM w IMAGE / LIST HERE                </div>              </div>              <!-- container -->            </div>          </li>        </ul>      </nav>    </div>
  </div>
</header>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity = "sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"crossorigin = "anonymous" > </script>

Bootstrap 3 Dropdown full width

Remove position: relative from the dropdown parents and make it relative for the full width bar. Position Relative makes any absolute children use that as it's positioning reference point.

If you add the following to the bottom of the CSS you'll get the effect you need.

.categorydropadjust, .dropdown {
position: static;
}
.container-fluid {
position: relative;
}
.dropdown-menu {
width: 100%;
}

https://jsfiddle.net/gswna389/3/


Related Topics

Angular 5 - Failed to Load Resource: the Server Responded With a Status of 404 (Not Found)

Align an Image and Some Text on the Same Line Without Using Div Width

Css :Before on Inline Svg

Bootstrap Navbar With Left, Center or Right Aligned Items

What Is the Default Padding And/Or Margin For a P Element (Reset Css)

Reset CSS Display Property to Default Value

Css :After Not Adding Content to Certain Elements

Css Media Queries: Max-Width or Max-Height

How to Apply Specific CSS Rules to Chrome Only

:First-Child Not Working as Expected

How to Force Browsers to Print Background Images in CSS

Change Button Border Color When the Button Is Being Clicked and After

Single Huge .Css File Vs. Multiple Smaller Specific .Css Files

What Does the CSS Rule "Clear: Both" Do

Bootstrap Dropdown Sub Menu Missing

Css Reset - What Exactly Does It Do

Z-Index Is Canceled by Setting Transform(Rotate)

How to Use /Deep/ or ≫≫≫ or ::V-Deep in Vue.Js


Leave a reply



Submit