asp.net MVC, Bootstrap и CSS. Выпадающий список вопросов

Question

Я пытаюсь понять, почему Chrome не отображает мой раскрывающийся список правильно.

Однако, он правильно делает в IE

Это строка кода, которая отображает этот список

@Html.DropDownListFor(model => model.CountryID, new SelectList(Model.CountryList, "Value", "Text"), new { @class = "form-control", size = "18px" }) 

Я использую по умолчанию Boostrap. css-файлы, предоставляемые при запуске нового проекта в Visual Studio 2013. Любая идея, как заставить это правильно отображать?

Answer 1

Вы создавать недопустимый HTML, и нет никакой гарантии, как различные браузеры (или даже версии одного и того же браузера) будет обрабатывать недопустимый HTML.

Ваш метод DropDownListFor() добавляет атрибут size который ожидает целое значение, так size="18px" недопустим и должен был бы быть size="18". Однако атрибут size определяет количество элементов, отображаемых при множественном выборе, поэтому, поскольку вам не нужен множественный выбор, просто удалите атрибут. Ваш код должен быть

@Html.DropDownListFor(m => m.CountryID, new SelectList(Model.CountryList, "Value", "Text"), new { @class = "form-control" }) 

Side Примечание: Ваш new SelectList(Model.CountryList, "Value", "Text") код предполагают, что CountryList уже IEnumerable<SelectListItem>. Если это так, то его бессмысленно дополнительные накладные расходы, чтобы создавать новый SelectList из существующего SelectList поэтому код должен быть

@Html.DropDownListFor(m => m.CountryID, Model.CountryList, new { @class = "form-control" }) 

Answer 2

Чтобы добавить свой класс в свою бритву, необходимо добавить htmlAttributes. Поэтому изменить свой код на:

@Html.DropDownListFor(model => model.CountryID, new SelectList(Model.CountryList, "Value", "Text"), htmlAttributes:new { @class = "form-control", size = "18px" })