Drop Down Menu Cutting Off Letters In Windows Chrome

Question

Drop down menu broken on Windows Chrome. Works perfectly fine on MAC Chrome and the letters aren't cut off. The problem:

The word, select, should be completely visible.

The CSS is basic:

.form-control {
    height: 30px;
    width: 50%;
    padding: 8px 12px;
    font-size: 13px;
}

With standard bootstrap.

But it worked completely fine on a Mac, the letters weren't cut off @ceejayoz. — RomanK, Jun 18 '16 at 02:20
@RomanK The two probably have slightly different font rendering methods. Either way - Bootstrap form-controls default to 34px high when I inspect them in Chrome. — ceejayoz, Jun 18 '16 at 02:20

score 2 · Accepted Answer · answered Jun 18 '16 at 02:20

height: 30px; is likely your issue.

A quick look at the default .form-control in my Chrome inspector shows the elements as being 34px high. You've made the .form-control elements too small to display the entirety of their contents.

In general, you should avoid explicitly setting the height of these.

score 0 · Answer 2 · answered Jan 03 '19 at 20:54

I ran into this issue not long ago.

Removing the vertical padding is what set it to good in windows chrome for me. It didn't impact the display negatively in Mac Chrome for me either.

.form-control {
    height: 30px;
    width: 50%;
    padding: 0px 12px;
    font-size: 13px;
}

Drop Down Menu Cutting Off Letters In Windows Chrome

2 Answers2