Setting same width for select and option

Question

I am trying to set width for option content. But its taking the width of option value which is having maximum length. I don't have any control over option value length. If its more option content is going out of its parent div class="col-md-6"

How can I restrict the width of option. So that it won't go out of its parent div.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <div class="container">

        <div class="row">
            <div class="col-md-4">

                <label class="control-label">Select Accomplishment</label>

                <select class="form-control form-select">
  <option value="" selected="selected">New Accomplishment</option>
  <option value="0">New AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew AccomplishmentNew Accomplishment</option>
</select>

            </div>

        </div>

    </div>

@AliSajid I dont want my dropdown values to go out of its parent div. It should hide remaining text — IamGrooot, Mar 12 '18 at 10:33
https://stackoverflow.com/questions/12371329/html-select-dropdrown-width-is-too-big — Nikhil Eshvar, Mar 12 '18 at 10:37
I think you have to trim de text. You add "..." and then you add letter one by one using javascript. In each turn, you check if the width is still below the parent width. When the width is longer, you remove a letter and inject the text. — Sandwell, Mar 12 '18 at 10:54

score 0 · Answer 1 · answered Mar 12 '18 at 11:08

0

select {
    width:100%;
}

If you have padding in your class, you may need to reduce it to around 95 or so %.

This works as it applies the select css to the dropdown options too. Just ensure that none of your other classes contradict this.

answered Mar 12 '18 at 11:08

DKyleo

806
8
11

Setting same width for select and option

1 Answers1