问题描述:

I am using Bootstrap 3.3.5 Dropdown menu. and showing the selected option from dropdown by jQuery.

But I am getting some issue here. I want dropdown-menu and button has to be same width always. That is large text width.


Online Demo


HTML

<!-- Dropdown -->

<div class="btn-group">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

<span class="selection">Lorem Ipsum dolar sit amet</span><span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Lorem Ipsum dolar sit amet</a></li>

<li><a href="#">Option 2</a></li>

<li><a href="#">Option 3</a></li>

</ul>

</div>

<!-- /Dropdown -->

jQuery

$(".dropdown-menu li a").click(function(){

var selText = $(this).text();

$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');

});


Please check the images below...


.dropdown-menu{min-width:auto;width:100%;}

If I add Above CSS, Output is...

网友答案:

Ok, so I have done a little nasty work for you. I changed the .dropdown-menu as

.dropdown-menu{min-width:auto;width:auto;}

And then I wrote a script as

$(document).ready(function() {
   var tWidth = $('.dropdown-menu').outerWidth();
   var uWidth = $('.btn.btn-default.dropdown-toggle').outerWidth();

  if (tWidth>=uWidth){

   $('.btn.btn-default.dropdown-toggle').css("width", tWidth); 

  }

  else {

     $('.dropdown-menu').css("width", uWidth); 
  }
});

What this does is, it checks for the width of the drop down toggle and the .dropdown-menu and assign the bigger width to the smaller div. So both divs will have the same width.

Here is the CodePen

网友答案:

CSS

.dropdown-menu {
    min-width: auto;
   // width: 100%;
    width: auto;
}
相关阅读:
Top