-4

As you can see - the once clicking the select menu - the options are overlapping.

enter image description here

I wonder if anyone stumble upon this kind of behavior and what could to match the option width to the select width - I didn't added a fiddle because the problem occurs in my project which I can't share. So I need a more general approach.

.select {
   width: 100%;
   border-radius: 5px;
   border: 1px solid #dcdcdc;
   font-size: 12px;
 }
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
RoyBarOn
  • 919
  • 3
  • 24
  • 63

2 Answers2

1

I am speculating a bit here as your question has limited information but I believe the problem is that you have used different font sizes for the select and for the option. It can certainly be seen from the screenshot that you are using different font sizes.

Consider this code:

.select {
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  font-size: 12px;
}

.select option {
  font-size: 16px;
}
<select class="select">
  <option selected>i like burger and fries</option>
  <option>i like burger and fries</option>
  <option>i like burger and fries</option>
</select>

As you can see it produces the same problem. You need to review your code and CSS to ensure that you are not using different font sizes. If the font size is the same then the options should line up just fine.

The solution to the above code is to simply remove the .select option definition from the CSS.

Note that there can also be other properties that could cause a size mismatch not just font size. For example, font style, spacing, padding, etc. You basically need to ensure you don't style the options differently, just let them inherit from the select.

musefan
  • 47,875
  • 21
  • 135
  • 185
  • musefan - Thanks - in my case there is some extra space to the right of the text... so i've tried paddng and margin = 0px!important - but nothing has changed – RoyBarOn Aug 31 '17 at 09:39
  • @RoyBarOn: Well then it will be a different property instead. Unless you can provide the HTML and CSS that replicates the issue then there is nothing more we can do to help. You are the only person who has access the the source code at the minute, so you are the only person that can identify the exactly problem. – musefan Aug 31 '17 at 09:43
  • Thanks - i'll do some more testings.. if this issue is not something that could not be resolved easily here - then it might be a local problem... generated by other css settings.... Thanks any way – RoyBarOn Aug 31 '17 at 09:55
0

Solution :

select {
   width: 100%;
   border-radius: 5px;
   border: 1px solid #dcdcdc;
   font-size: 12px;
 }
<select>
  <option tabindex='-1'>I like Burger and fries</option>
  <option>I like Burger and fries</option>
  <option>I like Burger and fries</option>
  <option>I like Burger and fries</option>
  <option>I like Burger and fries</option>
  <option>I like Burger and fries</option>
</select>
Maulik
  • 765
  • 3
  • 14
  • I don't think this is right because you haven't changed anything. The OP clearly has a containing element that is restricting the width of the select element – musefan Aug 31 '17 at 09:12
  • Maulik Bhatt - thanks for your time - i'll do some more checking. – RoyBarOn Aug 31 '17 at 09:56