5

The options in my select field are not responsive .

enter image description here

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 ?

Sylvain
  • 129
  • 1
  • 8
  • Thank you for your reply, I tried with other column width but that does not solve the problem. – Sylvain Jun 10 '16 at 07:48
  • 1
    I think this is purely based on how many options you have. Looking at the scrolling bar, it seems you have a lot of options. Consider using an ajax loader ( https://select2.github.io/examples.html ) – Dave Plug Jun 10 '16 at 08:14
  • @Dave Thank you for the link and yes, you are right there are many options, but I think the problem is that bootstrap can not add style to the option tag because it is in a php tag. There is a way to force style in php ? – Sylvain Jun 10 '16 at 08:46

1 Answers1

2

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

Community
  • 1
  • 1
Nacho M.
  • 672
  • 4
  • 9
  • Thank you for your very interesting answer , but it does not solve the problem ... I'll test with a dropdown button – Sylvain Jun 10 '16 at 08:09