Bootstrap 3 selects options by disabling

Question

Is there a way to prevent the selection of “clipping” options in Bootstrap? See code and figures below. The first image displays the correct display options. In the second picture, the parameters are disabled after I changed the size of the screen width less than the option text.

If I cannot do this with CSS, I plan to use jQuery to set the width of the selection window to the largest width of the parameter if the width of the option is greater than the width of the selection.

<select class="form-control multiple" size="3"> <option>test123 test123 test123 test123 test123 test123</option> <option>test123 test123 test123 test123 test123 test123</option> </select> 

Answer 1

The only thing I can think of is that since Bootstrap containers are inherently responsive, they will automatically resize the <input> depending on the current browser size. Take a look at this structure:

 <div class="container"> <div class="row"> <div class="col-xs-12"> <input type="text" class="form-control" value="I am a very, very, very, very, very, very long option. I'm going to extend off the screen."/> </div> </div> <div class="row"> <div class="col-xs-12"> <select class="form-control"> <option value="1">I am a very, very, very, very, very, very long option. I'm going to extend off the screen.</option> </select> </div> </div> </div> 

In this example, if we resize the window smaller and smaller, the width of <input> and <select> will correspond to the size of the container in <div class="col-xs-12"> . To prevent this, we will need to use fixed-width inputs, which tend to contradict the use of an adaptive structure such as Bootstrap, but I see the need for some situations.

Some suggestions to consider:

• Is it possible to have smaller tags?
• Is your <select> container the maximum width?
• Is it possible to use <modal> to select your options if there is no space?

And if all else fails, you can always create a custom class <div class="col-xs-12 fixed"> and set the width to something static or base value, or as you suggested using JQuery to find the maximum width of the longest value parameter.

Hope this helps!