引导选择框样式冲突

Question

I am re-styling an existing website, and have come across the following strange error. The select boxes have an overlapping white space where the option values are. I am attaching an image. Image of select box with white space

I am using bootstrap to do the new styling. Code example follows:

        <div class="form-group">
            <label class="control-label" for="truckName">Truck:</label>
            <select class="form-control" name="truckName" id="truckName">
                @foreach (var truck in ViewBag.trucks)
                {
                    <option value="@truck.id">@truck.name</option>

                }
            </select>
        </div>

Any idea where I might look to resolve this issue would be very much appreciated.

Answer 1

Your snap appears as if the site has some pluigin or code to modify your select boxes as select box does not appear as in your snap. If you look into your code (on client side, using inspect element feature of browser) you will get that there is some span/div has been used which is overlapping or producing the white background/white space over the select element.