Ошибка SelectList компонента MVC - неправильная ширина при инициализации внутри скрытого div

У меня есть эта глупая проблема с инициализацией SelectList

На мой взгляд, я инициализирую список:

<div class="col-md-6">
    <label class="control-label">Offer type</label>
    @Html.DropDownListFor(m => m.Filter.OfferTypeList, 
        new SelectList(Model.OfferTypes, "IdOfferType", "Name"), 
        new { multiple = "multiple", size = "1", @class = "form-control multipleSelect" })
</div>

Когда список инициализируется, все в порядке. Ширина SelectList составляет половину экрана.

Я хотел бы использовать свертывание - это означает, что при инициализации страницы этот div заворачивается в div со стилем = "display: none;" Но это заставляет MVC устанавливать ширину SelectList в 100 пикселей; который не предназначен. Вы можете просто имитировать это, инициализировав SelectList внутри скрытого div, а затем удалив display:none с помощью FireBug — затяжка, слишком маленькая!

РЕДАКТИРОВАТЬ: я забыл упомянуть, что мы используем bootstrap 3

Спасибо за предложения, может быть решение простое.


asp.net-mvc selectlist hidden
person XzajoX    schedule 14.10.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Asp.Net MVC не добавляет никаких дополнительных стилей, если вы не устанавливаете их напрямую. Таким образом, проблема заключается в размере выбранных элементов по умолчанию на HTML-странице. См. этот пример. Я установил стиль для ввода select

select { width: 200px; }

Таким образом, все элементы select на странице по умолчанию будут иметь ширину = 200 пикселей. Чтобы установить фиксированный размер вашего выбора, вы должны установить стиль для класса multipleSelect.

person Max Brodin    schedule 14.10.2014
comment
Это сгенерированный MVC (я думаю) div, который имеет неправильную ширину: ‹div class=ms-parent style=width: 100px; › ... Хм, но я только что узнал, что jquery.multiple.select.js также вмешивается в это... - person XzajoX; 14.10.2014

arrow_upward
0
arrow_downward

Если вы используете Bootstrap, попробуйте настроить <div class = "col-md-6">

Bootstrap делит основной блок на 12 частей.

Для получения дополнительной информации перейдите по ссылке: http://getbootstrap.com/examples/grid/

Надеюсь, поможет

person Nirav Parmar    schedule 14.10.2014
comment
Пробовал, размер столбца не имеет значения. Я не публиковал весь код, первый столбец также col-md-6. Но спасибо за предложение. - person XzajoX; 14.10.2014