Bootswatch dropdown - last character of the list cut off

Question

The last character of the dropdown list keeps getting cut off when applying a bootswatch theme. The dropdown HTML is

<div class='menu' id="dropmenu">
  <select name="dates" method="GET" action="/" width="300px" class="form-control">
    <option selected="selected">{{dropset}}</option>
    {% for date in dates %}
      <option value="{{date}}">{{date}}</option>
    {% endfor %}
  </select>
</div>

The result is

The closest solution is found here but isn't working for me. Tried css text align, various widths (px & %), etc but still no luck. It does not get cut off when using bootstrap but it's hard to say this is a bootswatch issue given it's popularity. Any ideas??

EDIT: It appears to be theme related. Originally I was using Flatly but when I tried Cerulean, Cyborg, Darkly & United it's not cut off. Cosmo cuts off too though... strange

could it be because width is in px? ( width="300px" ) . Have you tried % — hans-könig, May 20 '19 at 21:20

score 0 · Answer 1 · answered May 20 '19 at 21:22

try this make ( width:100% )

<div class='menu' id="dropmenu" >
  <select name="dates" method="GET" action="/" width="100%" class="form-control">
    <option selected="selected">{{dropset}}</option>
    {% for date in dates %}
      <option value="{{date}}">{{date}}</option>
    {% endfor %}
  </select>
  </div>

Bootswatch dropdown - last character of the list cut off

1 Answers1