Я пытаюсь выучить ASP Core и Razor, разрабатывая простой проект для представления спряжения глаголов для разных времен для пользователя. Как часть проекта, у меня в начале есть страница опций с парой раскрывающихся списков (с использованием HTML выберите компоненты), чтобы выбрать глаголы для представления и порядок их представления.
Один из раскрывающиеся списки (селектор порядка) работают так, как я и ожидал, т.е. они отображаются с одним значением и стрелкой раскрывающегося меню справа от нее, которая открывает список при нажатии (см. рисунок ниже). Другой (селектор глаголов) отображает 4 элемента в поле с полосой прокрутки справа от списка и без выпадающего селектора. Оба используют один и тот же код и базовые данные, и я не могу понять, почему они ведут себя по-разному. Я хочу, чтобы они оба вели себя как выпадающий список (одна строка с выпадающим селектором справа).
Кто-нибудь знает, как я могу заставить их вести себя так же? Снимок экрана и сегменты кода, представленные ниже.
Это снимок экрана двух выбранных компонентов. Селектор глагола находится сверху, а селектор порядка - снизу.
Селектор глагола имеет следующий HTML (он является частью набора опций и поэтому имеет радиовход, но нет взаимодействия между этими компонентами. Я закомментировал радиовход, и нет никакой разницы в том, как отображается выбранный компонент):
<td>
<input type="radio" name="selverbs" value="sel" id="sel" onclick="javascript:topenable()" />
<label for="top">Selected verbs </label>
<select name="verbs" asp-for="selectedverbs" asp-items="Model.verbs"></select>
</td>
Селектор заказа имеет следующие значения HTML:
<td>
<label>Verb order: </label>
<select name="order" asp-for="selectedorder" asp-items="Model.order"></select>
</td>
Оба селектора используют списки с элементами SelectListItems.
Данные для селектора глаголов создаются следующим образом:
public List<SelectListItem> GetVerbs()
{
List<SelectListItem> results = new List<SelectListItem>();
int rank = 1;
foreach (string s in collection.AsQueryable().OrderBy(doc => doc.Rank).GroupBy(doc => doc.Rank).Select(g => g.First().Infinitive))
{
results.Add(new SelectListItem(s, rank.ToString(CultureInfo.CurrentCulture)));
rank++;
}
return results;
}
Данные для селектора заказов генерируются следующим образом:
[BindProperty]
public List<SelectListItem> order { get; } = new List<SelectListItem>
{
new SelectListItem { Value = "1", Text = "forward" },
new SelectListItem { Value = "-1", Text = "reverse" },
new SelectListItem { Value = "0", Text = "random" }
};
Я попытался установить size = "1" в селекторе глаголов, и это не имело никакого значения. Этот компонент по-прежнему отображается с полосой прокрутки (см. Снимок экрана ниже).
Я не думаю, что в моем файле CSS есть что-то, что могло бы вызвать эта разница, но не очень много знаю о CSS, поэтому включили полный файл ниже. В основном это файл по умолчанию, созданный Visual Studio, когда я настраивал проект с помощью нескольких дополнений от меня.
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Body layout
-------------------------------------------------- */
div{
color: black;
font-weight:normal;
}
select {
margin-right: 20px;
overflow-y: auto;
text-align: left;
width: 55px;
}
#incorrect {
color: red;
font-weight: bold;
}
#correct {
color: forestgreen;
font-weight: bold;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: none;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
Я проверил это через Chrome, IE и Edge и получил один и тот же результат каждый раз.