MVC и Editor для ширины - PullRequest
Новая
       37

MVC и Editor для ширины

24 голосов
/ 18 января 2011

Могу ли я установить ширину элемента управления EditorFor в моем представлении?

Я установил несколько параметров: 

[Required, DisplayName("Payee Name"), StringLength(50)]
public string Name { get; set; }

Однако я не могу установить ширину текстового поля, которое будет отображаться. 

<table width="300" border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <%=Html.LabelFor(m => m.Name)%>
        </td>
        <td>
            <%=Html.EditorFor(m => m.Name)%>
        </td>
    </tr>

Можно ли это как-нибудь сделать?

Я пытался: 

<%=Html.EditorFor(m => m.Name, new {width=50)%>

Но не радости ...

Ответы [ 12 ]

34 голосов
/ 05 июля 2011

Вместо EditorFor используйте TextBoxFor: 

<%=Html.TextBoxFor(m => m.Name, new {style = "width:50px"})%>
18 голосов
/ 18 января 2011

Что не так с использованием CSS для стилизации ширины элемента управления?

10 голосов
/ 24 июня 2015

В mvc 5 есть настройка в site.css, которая устанавливает max-width = 200 для всех текстовых областей. Это смущало меня, пока я не нашел этот пост. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap как говорит Пол Литвин:

Да, Microsoft по какой-то причине устанавливает максимальную ширину всех input, select и textarea контролируют до 280 пикселей. Не уверен мотивация этого, но пока вы не измените это или не переопределите это присвоение элементов управления формы другому классу CSS, вашим элементам управления никогда не сможет быть шире 280 пикселей. 

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Таким образом, если вы прагматичны, вы меняете максимальную ширину, например, на 600 пикселей

5 голосов
/ 02 октября 2016

Заменить <%=Html.EditorFor(m => m.Name, new {width=50)%> на это 

<%=Html.EditorFor(m => m.Name,new { htmlAttributes = new { style = "width: 50px" }, }
3 голосов
/ 17 марта 2016

С BootStrap 3 

@Html.EditorFor(model => model.PriceIndicatorDesc, new { htmlAttributes = new { @class = "form-control", @style = "width:280px" } })
2 голосов
/ 03 марта 2017

Как упоминалось ранее, место, куда вы хотите попасть, находится на site.css 

input,
select,
textarea {
    max-width: 280px;
}

. Вы можете установить любое значение по умолчанию или удалить блок, чтобы получить значение Bootstrap по умолчанию 100%.Лично я добавил следующие параметры, чтобы можно было легко внести некоторые изменения в зависимости от элемента управления и поля: 

.form-control-25 {
    max-width: 25%;
}

.form-control-50 {
    max-width: 50%;
}

.form-control-75 {
    max-width: 75%;
}

.form-control-100 {
    max-width: 100%;
}
2 голосов
/ 11 октября 2011

Возможно, вам понадобится добавить «! Важное» к атрибуту css, чтобы гарантировать, что он переопределяет значение по умолчанию для TextBox, например width: 50px! Important;

0 голосов
/ 02 февраля 2019

Для ASP.NET Core: 

<%=Html.TextBoxFor(m => m.Name, new { htmlAttributes = new { style = "width: 50px" } })%>
0 голосов
/ 09 октября 2018

В вашем CSS-файле для Site.css максимальная ширина по умолчанию равна 280px, если у вас VS автоматически генерировал все для вас, когда вы впервые создавали проект MVC. Независимо от того, насколько большой ширины вы установили @html.editorfor с заданным идентификатором, он ограничен приведенным ниже синтаксисом. 

input,
select,
textarea{
     max-width:280px
}

Здесь вы можете изменить его, задав ему новую максимальную ширину или максимальную высоту.

0 голосов
/ 27 февраля 2017

Патрик Линдстрем корректен с Max-width.

Я смог обойти это, установив max-width и width 

@Html.EditorFor(model => model.Source, new { htmlAttributes = new { @class = "form-control", @placeholder = "Source",  @style = "width: 900px;max-width: 900px;" } })
Страница:
...