How can I set fixed width for options(dropdown) in bootstrap selectpicker

Question

This is code

  <select class="selectpicker form-control" data-live-search="true" id="subject_teacher_drop_down">
       <option>English</option>
       <option>Methodology of social science with special reference to economics</option>
  </select>

I want to make the width of the dropdown say for example 100 px . Now width is equal to the size of the biggest option.

Answer 1

Guyz, I came up with a simple answer. We can use the 'datacontent' attribute in the select option to display the values of select options thereby changing its width :) The code is:

 <select class="selectpicker form-control" data-live-search="true" id="subject_teacher_drop_down">
   <option data-content="English">English</option>
   <option data-content="Methodology of social...">Methodology of social science with special reference to economics</option>
</select>

If you are passing the values dynamically, do like this :

  <select class="selectpicker form-control" data-live-search="true">
          <?php foreach ($subjectList as $subjects) : ?>
             <option data-content=" <?php $a =$subjects->getName();$b = substr($a, 0, 35);$y = $b . "...";if($a > $b)echo $y; else echo $a;?>" id="<?php echo $subjects->getId(); ?>" name="<?php echo $subjects->getName(); ?>" value="<?php echo $subjects->getName(); ?>">
                <?php echo $subjects->getName(); ?>
            </option>
       <?php endforeach; ?>
  </select>

Answer 2

There would seem to be no way to do this using css styles and/or classes in the markup but if you are open to javascript -- in the example below, jQuery -- then you can hook the selectpicker's show.bs.select event and modify the widget as follows:

$('.selectpicker').on('show.bs.select', function () {
var $dropdownMenu = $(this).nextAll('div.dropdown-menu').first();
if ($dropdownMenu.length > 0) {
    $dropdownMenu.css('min-width', '').css('max-width', '100%');
    var $inner = $dropdownMenu.find('div.inner');
    if ($inner.length > 0) {
        $inner.css('overflow-x', 'hidden');
    }
}

});

Here I am accessing the div for the dropdown menu that it uses and removing whatever it is assigning for the min-width and then setting max-width to 100% and then to remove the horizontal scrollbar that might be shown if options are too wide I am setting the dropdown's 'inner' div overflow-x to hidden .

The result is a dropdown menu that is constrained to the width of the button that shows it with any options that have text that is too wide being truncated.

More work than I wanted to do on this but the default behavior makes dropdowns unusable on small-screen displays...

Answer 3

You can add

select,option
{
   width : 150px(just give the width PX which it for screen size);
}