CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Rimil Dey
Rimil Dey

Reputation: 977

Bootstrap dropdown not appearing in the middle of the screen

I have a few form fields, datepickers and a dropdown on my sample html page. On clicking the dropdown menu, it appears to the left of the screen, instead of appearing in the center, as all the other contents are. How to get it in the center of the page?

enter image description here

Html code:

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Form</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <link href="./datepicker.css" rel="stylesheet">



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <center><form>


        <div class="input-append date" data-date-format="dd-mm-yyyy" >
           <label for="dp1">Starting Date</label> <br>
          <input id="dp1" size="16" type="text" value="dd/mm/yyyy"/> 
          <span class="add-on"><i class="glyphicon glyphicon-calender" id="cal1"></i></span>
        </div>


         <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
           Number of students :
          <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
         <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          </ul>
        </div><br><br><br><br><br>
        <div class="form-group">
            <label for="inputName">Name of the student</label>
            <input type="text" class="form-control" id="inputName" placeholder="">
        </div> 

        <div class="form-group">
            <label for="inputFname">Father's Name</label>
            <input type="text" class="form-control" id="inputFname" placeholder="">
        </div> 

        <div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
          <label for="dp2">Date of Birth</label> <br>
          <input id="dp2" size="16" type="text" value="dd/mm/yyyy"/>
          <span class="add-on"><span class="glyphicon glyphicon-calender" id="cal2"></span></span>
        </div>

        <div class="form-group">
          <label for="inputAddress">Address of the student</label>
          <textarea type ="text" class = "form-control" id = "inputAddress" rows = "8" placeholder = "" ></textarea>
          <span id="addressSpan"></span>
        </div>

        <div class="form-group">
          <label for="inputObjects">hobbies</label>
          <textarea type ="text" class = "form-control" id = "inputObjects" rows = "8" placeholder = "" ></textarea>
          <span id="objectsSpan"></span>
        </div>

         <div class="form-group">
            <label for="inputschoolName">Name of the school</label>
            <input type="text" class="form-control" id="inputschoolName" placeholder="">
        </div>

        <div class="input-append date" data-date="" data-date-format="dd-mm-yyyy">
          <label for="dp3">Date of Commencement of the internship</label> <br>
          <input id="dp3" size="16" type="text" value="dd/mm/yyyy"/>
          <span class="add-on"><i class="glyphicon glyphicon-calender" id="cal3"></i></span>
        </div>

        <div class="form-group">
          <label for="inputOffice">address of the school</label>
          <textarea type ="text" class = "form-control" id = "inputOffice" rows = "8" placeholder = "" ></textarea>
          <span id="officeSpan"></span>
        </div>

        <div class="form-group">
            <label for="inputWill">like school?</label>
            <input type="text" class="form-control" id="inputWill" placeholder="">
        </div>

        <div class="form-group">
          <label for="inputContribution">achievements</label>
          <input type="text" class="form-control" id="inputContribution" placeholder="">
        </div>

        <div class="form-group">
          <label for="inputSalary">fees</label>
          <input type="text" class="form-control" id="inputSalary" placeholder="">
        </div>

         <div class="form-group">
          <label for="inputaccolades">accolades</label>
          <input type="text" class="form-control" id="inputaccolades" placeholder="">
        </div>

    </form></center>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="./js/jquery-1.11.3.js"></script>
    <script>

    $(document).ready (function (){
       $("#dp1").datepicker();
      $("#dp2").datepicker();
      $('#dp3').datepicker();
      $('.dropdown-toggle').dropdown()
    });

    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="./js/bootstrap.min.js"></script>
    <script src="./bootstrap-datepicker.js"></script>  </body>
</html>

CSS :

form .form-group {
    width : 500px;
}

.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 190px;
}

.datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 191px;
}

Any help is much appreciated. Thanks in advance

Upvotes: 0

Views: 518

Answers (1)

K K
K K

Reputation: 18099

There are many ways to solve this issue:

Solution here: http://jsfiddle.net/lotusgodkk/GCu2D/820/

CSS:

.dropdown, .dropup {
    position: relative;
    display: inline-block;
}

Or

.dropdown, .dropup {
    position: relative;
    width: 250px;//any value
}

Explanation: The dropdown container has no defined width and due to which it automatically takes full width. When you click on dropdown,by default the dropdown menu will position itself to the leftmost of the dropdown class which is the left edge of the screen in this case. Either define a width of the dropdown element so that the dropdown menu can position itself, else just use display:inline-block which will automatically take the width according to the content.

As pointed out in the comments, try to get rid of center tag

Upvotes: 1

Related Questions