select option width auto increases

Question

.option100{
    width:100px !important;
} 

<select id="fieldOfInterestSelect" name="fieldOfInterest" class="form-control" required="">
  <option value="-1">SELECT ONE</option>
  <option value="4893" class="option100">Actual(R)rrrrrrrrrrrrrrrr</option>
  <option value="4891" class="option100">Customerrrrrrrrrrrrrr</option>
  <option value="4892" class="option100">Daterrrrrrr</option>
  <option value="4894" class="option100">Forecast(R)RRRRRR</option>
</select>

My concern is , if the length of text in option is larger than its container's length (option), then it should be automatically converted (fit) into multiple lines to fit the container's width.

That doesn't happen. You can limit the `width` of your `SELECT` tag and that gets applied to the `options` but you can't style your option tag or make it multiLine, but if the `option value` is longer, then it will take the max available space to show Value. `SELECT` is rendered by the operating system not by the `browser` — Deepak Yadav, Apr 14 '17 at 05:52
can you explain your problem bit more and formate your code? — HirenMangukiya, Apr 14 '17 at 05:53
@HirenMangukiya he wants to limit the `option` tag `width` so long text value goes multiline instead of going straight out. — Deepak Yadav, Apr 14 '17 at 05:56

Giulio Bambini · Answer 1 · 2017-04-14T06:47:50.297

1

This may not be what you want, but you can get two lines per option, by using the "optgroup" tag

<select>
  <optgroup label="Option 1">
    <option value="yes">Option 1 new Line</option>
  </optgroup>
  <optgroup label="Option 2">
    <option value="no">Option 2 new line</option>
  </optgroup>
</select>

You can find more details about this topic from this link enter link description here

edited Apr 14 '17 at 06:47

answered Apr 14 '17 at 06:41

Giulio Bambini

4,695
4
21
36

score 0 · Answer 2 · answered Apr 14 '17 at 06:06

You cannot break a select option. Instead you could provide a tooltip to the options to show lengthy options.

<!DOCTYPE html>
<html>

<head>
    <style>
        .option100 {
            width: 100px !important;
        }
    </style>
</head>

<body>
    <select id="fieldOfInterestSelect" name="fieldOfInterest" class="form-control option100" required="">
        <option value="-1">SELECT ONE</option>
        <option title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!" value="4893" class="option100">Actual(R)rrrrrrrrrrrrrrrr</option>
        <option  title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!"  value="4891" class="option100">Customerrrrrrrrrrrrrr</option>
        <option  title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!"  value="4892" class="option100">Daterrrrrrr</option>
        <option  title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!"  value="4894" class="option100">Forecast(R)RRRRRR</option>
    </select>

</body>

</html>

score 0 · Answer 3 · answered Apr 14 '17 at 06:13

Try the following code

Html

<select id="resizing_select" name="fieldOfInterest" class="form-control" required="">
    <option value="-1">SELECT ONE</option>
    <option value="4893" class="option100">Actual(R)rrrrrrrrrrrrrrrr</option>
    <option value="4891" class="option100">Customerrrrrrrrrrrrrr</option>
    <option value="4892" class="option100">Daterrrrrrr</option>
    <option value="4894" class="option100">Forecast(R)RRRRRR</option>
</select>
<select id="width_tmp_select">
  <option id="width_tmp_option"></option>
</select>

Jquery

$(document).ready(function() {
 $('#resizing_select').change(function(){
    $("#width_tmp_option").html($('#resizing_select option:selected').text());
    $(this).width($("#width_tmp_select").width()); 
 });
});

CSS

#resizing_select {
 width: 107px;
} 

#width_tmp_select{
 display : none;
}

Here is the working jsfiddle:http://jsfiddle.net/FSsG8/623/

I think it should helps you,.

score 0 · Accepted Answer · answered Apr 14 '17 at 06:14

0

your answere is here check this fiddle, use selectBoxIt plugin for it.

And let me know it will helps you or not!

answered Apr 14 '17 at 06:14

HirenMangukiya

645
3
13
30

select option width auto increases

4 Answers4