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.

You have to look at the rendered markups ( through developer tool for example ), then apply your style ( `width:100px;` ) on the element — Thum Choon Tat, Jun 19 '18 at 11:00
Hi, welcome to Stack Overflow, it appears your question is a duplicate. Have a look [here](https://stackoverflow.com/questions/36676701/set-width-at-option-of-select-box). @ThumChoonTat applying the width to ` — Ivan, Jun 19 '18 at 11:00
Possible duplicate of [Set Width at Option of Select Box](https://stackoverflow.com/questions/36676701/set-width-at-option-of-select-box) — Ivan, Jun 19 '18 at 11:01
@Ivan OP is using third party library to render select field, and the output will not be `select` and `option`, so I think it's possible — Thum Choon Tat, Jun 19 '18 at 11:06
@ThumChoonTat, the library doesn't have anything to do with the styling of the select. You can style your elements without regard to the library. However, option's width cannot be changed that easily. It requires some JavaScript as you can see in the provided link. — Ivan, Jun 19 '18 at 11:20

RoshJ · Accepted Answer · 2018-06-20T06:10:46.253

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>

score 0 · Answer 2 · answered Oct 07 '20 at 16:34

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...

or... as I found out almost immediately after posting this, just add the following to your site.css file: `.bootstrap-select .dropdown-menu { max-width: 100% !important; }` — Christopher King, Oct 07 '20 at 17:01

score -2 · Answer 3 · answered Jun 19 '18 at 12:33

-2

You can add

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

answered Jun 19 '18 at 12:33

RaviKiran

1
1

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

3 Answers3