Options in select box not responsive

Question

The options in my select field are not responsive .

I use a php loop to display options and I think the problem comes from there :

<div class="form-group">
      <label class="col-sm-2 control-label">Sélectionner un article</label>
            <div class="col-sm-10">
                 <select class="form-control m-b-sm" name="a_idarticle" id="a_idarticle">
                      <?php
                         foreach ($allarticles as $aa) {
                             echo '<option value="'.$aa['id_article'].'">'.$aa['id_article'].'--'.$aa['titre'].'</option>';
                         }
                      ?>
                </select>
         </div>
  </div>

Does anyone know a solution ?

Answer 1

One solution could be the use of ellipsis

Try to change the CSS property for select and option attr in your form:

CSS:

#a_idarticle, #a_idarticle option {
     text-overflow: ellipsis;
}

References: Ellipsis for overflow text in dropdown boxes

Edit to add another solution: In addition, you could use a button to wrap the dropdown, like in this post: Setting the width of a dropdown list in Bootstrap 3.0