CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcss
user4752928
user4752928

Reputation:

Position dropdown-menu right under menu header

I am trying to position my dropdown-menu right under my menu header like in following image. At best I get it to position right next to it, but is it possible to achieve my objective?

enter image description here

Here my FIDDLE ... FIDDLE

Please see the example in my FIDDLE/BOOTPLY which shows the result of my code correctly. In SA its not right, sorry about that.

My code...

$(".btn_clear").on('click', function (e) {
    e.stopPropagation();
    $(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

$(".products .checkbox").on("click", function(e) {
  
  var i = $("li").index( $(this).parent() );
  console.log(i);
  
  $('.products .btn_clear').css('background', 'blue');
  $('.products .btn_apply').css('background', 'green');
  
});

$(".availability .checkbox").on("click", function(e) {
  
  var i = $("li").index( $(this).parent() );
  console.log(i);
  
  $('.availability .btn_clear').css('background', 'blue');
  $('.availability .btn_apply').css('background', 'green');
  
});
.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

.checkbox :hover {
      background-color:red;
      cursor:pointer;
    }

.div_form :hover {
      background-color:green;
      cursor:pointer;
    }

.btn_clear {
    float: right;
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	padding: 10px 29px;
	text-align: center;
    background-color:grey
  }
  
.btn_apply {
    float: left;
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	padding: 10px 17px;
	text-align: center;
    background-color:yellow
    }


.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 30px;
	padding-right:30px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
    width: 100%;
}

.div_form {
	position: absolute;
	bottom: 0;
	bottom: -70px
}

.btn {
	border-radius:0;
	margin-top:5px
}

.dropdown-menu {
	border-radius:0;
	border:5px solid blue;
    position: relative;
    background-color: red;
    border-top-width: 0px;
}

.typeahead {
	width:90%;
	margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-toolbar">
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Products</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu products" style="margin-left: 2em">
                <div style="position: relative;">
                    <div class=" scrollable-menu" style="margin-bottom: 70px;">
                        <input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
                    <label><input value="" type="checkbox"> Alpha</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Beta
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Gamma</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Delta</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Omega</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Koppa
                    </label>
                </div>
                        <div class="div_form">
                            <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--Success buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Availability</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu availability" style="margin-left: 2em">
                <div style="position: relative;">
                    <div class=" scrollable-menu" style="margin-bottom: 70px;">
                        <input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
                    <label><input value="" type="checkbox"> One</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Two
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Nine</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Eight</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Seven</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Fifteen
                    </label>
                </div>
                        <div class="div_form">
                            <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--Warning buttons with dropdown menu-->
    </div>

Upvotes: 2

Views: 876

Answers (1)

Travis Schettler
Travis Schettler

Reputation: 854

Here you go, I removed the JavaScript and removed the left margin and relative positioning from the dropdown menu: http://www.bootply.com/KaP7SiUYVw

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}
.checkbox:hover {
  background-color: red;
  cursor: pointer;
}
.div_form:hover {
  background-color: green;
  cursor: pointer;
}
.btn_clear {
  float: right;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  padding: 10px 29px;
  text-align: center;
  background-color: grey
}
.btn_apply {
  float: left;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  padding: 10px 17px;
  text-align: center;
  background-color: yellow
}
.checkbox label,
.radio label {
  min-height: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
  width: 100%;
}
.div_form {
  position: absolute;
  bottom: 0;
  bottom: -70px
}
.btn {
  border-radius: 0;
  margin-top: 5px
}
.dropdown-menu {
  border-radius: 0;
  border: 5px solid blue;
  background-color: red;
  border-top-width: 0px;
}
.typeahead {
  width: 90%;
  margin-left: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="btn-toolbar">
  <!--Default buttons with dropdown menu-->
  <div class="btn-group">
    <button class="btn btn-primary" type="button">Products</button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
    </button>
    <div class="dropdown-menu products">
      <div style="position: relative;">
        <div class=" scrollable-menu" style="margin-bottom: 70px;">
          <input class="countries" placeholder="Countries" type="text">
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Alpha</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Beta
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Gamma</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Delta</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Omega</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Koppa
            </label>
          </div>
          <div class="div_form">
            <span class="btn_apply">Apply</span>  <span class="btn_clear">Clear</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Success buttons with dropdown menu-->
  <div class="btn-group">
    <button class="btn btn-primary" type="button">Availability</button>
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
    </button>
    <div class="dropdown-menu availability">
      <div style="position: relative;">
        <div class=" scrollable-menu" style="margin-bottom: 70px;">
          <input class="typeahead" placeholder="Search values" type="text">
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">One</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Two
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Nine</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Eight</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Seven</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Fifteen
            </label>
          </div>
          <div class="div_form">
            <span class="btn_apply">Apply</span>  <span class="btn_clear">Clear</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Warning buttons with dropdown menu-->
</div>

Upvotes: 2

Related Questions