Блог

Главная - Вопросы по программированию - оформление выпадающего списка

оформление выпадающего списка

#html #css #asp.net-mvc

#HTML #css #asp.net-mvc

Вопрос:

У меня есть куча текстового поля и выпадающего списка на моей веб-странице. Внешний вид текстового поля полностью отличается от выпадающего списка в моем представлении MVC. Текстовое поле автоматически генерируется операциями CRUD MVC, но я сам размещаю выпадающий список на своей странице. Ниже приведен код:

 <div class="form-group">
        @Html.LabelFor(model => model.Office, new { @class = "control-label" })
        @Html.EditorFor(model => model.Office, new { htmlAttributes = new { @class = "form-control", style = "Width:50%" } })




    </div>
    <div>
        @Html.LabelFor(model => model.Group, new { @class = "control-label" })
        @Html.DropDownList("Groups", ViewBag.Groupie as SelectList, new { htmlAttributes = new { @class = "form-control", style = "Width:50%" } })
    </div>




    <div class="form-group">
        @Html.LabelFor(model => model.Group, new { @class = "control-label" })
        @Html.EditorFor(model => model.Group, new { htmlAttributes = new { @class = "form-control", style = "Width:50%" } })


    </div>

на изображении ниже я хочу, чтобы выпадающий список выглядел так же, как текстовое поле. та же ширина и высота. Выпадающая группа слишком мала перед текстовым полем группы.

введите описание изображения здесь

Комментарии:

1. не уверен, что это причина, не видя, что делает ваш css, но я замечаю, что у контейнерных разделов текстовых полей есть класс applied — form-group , но у dropdownlists div его нет.

Ответ №1:

 <div class="form-group">
        @Html.LabelFor(model => model.Office, new { @class = "control-label" })
        @Html.EditorFor(model => model.Office, new { htmlAttributes = new { @class = "form-control", style = "Width:50%" } })
</div>
<div class="form-group">
        @Html.LabelFor(model => model.Group, new { @class = "control-label" })
        @Html.DropDownList("Groups", ViewBag.Groupie as SelectList, new{ @class = "form-control", style = "Width:50%"  })
</div>
<div class="form-group">
        @Html.LabelFor(model => model.Group, new { @class = "control-label" })
        @Html.EditorFor(model => model.Group, new { htmlAttributes = new { @class = "form-control", style = "Width:50%" } })
 </div>

Используйте этот код.