CODEWITHSUNDEEP
jquerycsstwitter-bootstraptwitter-bootstrap-3
theJava
theJava

Reputation: 15034

Setting bootstrap dropdown width equal to container

I have a left aside which is 260px wide and a right aside which is 260px wide. My center div is fluid 100% width.

On the click of the right arrow/center div, i want to have a dropdown of the same width of the center div container. Below is my code and fiddle. 

<div class="navbar navbar-default" role="navigation">
  <div class="container-fluid">    
   <div class="row">
    <div class="leftBox pull-left" href="#">
      <img src="//placehold.it/258x58">
    </div>
    <div class="rightBox pull-right" href="#">
      Right Div
    </div>
     <div class="centerBox">
       <ul class="nav pull-right">
          <li class="dropdown" id="menuLogin">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">
              <b class="glyphicon glyphicon-chevron-down"></b></a>
              <div class="dropdown-menu">
                <form class="form" id="formLogin"> 
                  <input name="username" id="username" placeholder="Username" type="text"> 
                  <input name="password" id="password" placeholder="Password" type="password"><br>
                  <button type="button" id="btnLogin" class="btn">Login</button>
                </form>
            </div>
          </li>
        </ul>
    </div>
  </div>
</div>
</div>

http://www.bootply.com/82O0SgmP8p

Upvotes: 1

Views: 1702

Answers (2)

Harry
Harry

Reputation: 89750

Here is a jQuery based solution which calculates the width of the center box (both on load and during window resizing) and then assigns the width to the login box and also positions it as appropriate.

Note: Refer comments inline for explanation of the steps.

$(document).ready(function(){
  var cntrboxWidth = $('#centerBox').width()-520; // Width of center box minus width of the two side boxez
  $('#navLogin + .dropdown-menu').width(cntrboxWidth); // Setting the width of Login box
  var extraWidth = $('#navLogin').outerWidth(); // Getting the width of the arrow icon box to adjust position
  $('#navLogin + .dropdown-menu').css('left',-(cntrboxWidth)+extraWidth); // Positioning the login box

  $(window).resize(function(){ // Adjusting position and size upon resizing window.
    cntrboxWidth = $('#centerBox').width()-520;
    $('#navLogin + .dropdown-menu').width(cntrboxWidth);
    extraWidth = $('#navLogin').outerWidth();
    $('#navLogin + .dropdown-menu').css('left',-(cntrboxWidth)+extraWidth); 
  });

});

Demo

EDIT: To position the login box exactly below the menu, use the below CSS. It need not be dynamic because as per CSS you have a fixed height (60px) for your menu bar.

.dropdown-menu{
    top: 60px; // Equal to the height of the menu
}

Upvotes: 1

henrywright
henrywright

Reputation: 10240

Why don't you make use of the grid system instead of floating the columns right and left?

With the grid you can do something like this

<div class="container">
    <div class="row">
        <div class="col-sm-3 width-260">
            <!-- left box goes here -->
        </div>

        <div class="col-sm-6">
            <!-- centre box goes here -->
        </div>

        <div class="col-sm-3 width-260">
            <!-- right box goes here -->
        </div>
    </div>
</div>

Then place your dropdown in the centre column. It'll be far easier to style that way (i.e. make it width: 100% of the containing element etc).

All you would then have to do is add some custom styles which make sure the right and left columns are fixed at 260px

Update: To make the right and left columns 260px fixed width, add this to your style sheet:

.width-260 {
    width: 260px;
}

Upvotes: 1

Related Questions