Вырезание текста внутри выпадающего меню Large Select Option

Question

Я делаю пользовательский интерфейс, полный элементов формы, и хочу, чтобы все элементы были элементами больших размеров.Но выпадающий действительно выдает как текст в вырезке.Никакая высота строки, никакое дополнение не в состоянии решить проблему.Я использую Bootstrap v3 в качестве основы пользовательского интерфейса в моем приложении.Я использую шрифт Open Sans.

Вот как это выглядит:

Вот код, который я использую:

HTML:

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

CSS:

label {
    font-size: 2.8vh;
    display: block;
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
}
.form-control {
    padding-top: 0;
    padding-bottom: 0;
    height: 5vh;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

Я пробовал некоторые решения, но они не работают для меня.

Уменьшение шрифта:

Увеличение высоты выпадающего меню или создание высоты автоматически:

Я ищу решение этой проблемы, но никакой помощи не нашелв переполнении стека.Можно ли это решить?

Спасибо

Answer 1

Используйте line-height:5vh вместо высоты в поле выбора.Это может решить проблему.

.form-control {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 5vh;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

Answer 2

.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

Это можно исправить, увеличив высоту элемента управления формы или удалив атрибут высоты из элемента управления формы, так что высота поля выбора будет обтекать текст.

Answer 3

удалено height: 15vh; и работает как положено.надеюсь это поможет.спасибо

label {
    font-size: 2.8vh;
    display: block;
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
}
.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

Answer 4

1. Вы можете увеличить высоту вашего поля выбора, например:

select.form-control  { //only targets select boxes with a class of form-control
    padding-top: 0;
    padding-bottom: 0;
    height: 15vh; //or min-height: 15vh; 
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

Без установки высоты:

select.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>