MVC и EditorFor width

Ответ 1

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

<%=Html.TextBoxFor(m => m.Name, new {style = "width:50px"})%>

Ответ 2

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

Ответ 3

В 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, ваши элементы управления никогда не сможет быть более широким, чем 280px.

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

Итак, если вы прагматичны, вы меняете максимальную ширину, например, 600px

Ответ 4

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

<%=Html.EditorFor(m => m.Name,new { htmlAttributes = new { style = "width: 50px" }, } 

Ответ 5

Вам может потребоваться добавить "! important" в атрибут css, чтобы гарантировать, что он переопределяет значение по умолчанию для TextBoxFor, например. ширина: 50px! important;

Ответ 6

С BootStrap 3

@Html.EditorFor(model => model.PriceIndicatorDesc, new { htmlAttributes = new { @class = "form-control", @style = "width:280px" } })

Ответ 7

Как упоминалось ранее, место, которое вы хотите посетить, находится в 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%;
}

Ответ 8

Если вам нужна пользовательская ширина вне обычного правила CSS, и вы используете Шаблоны редактора, вы можете сделать

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

Затем в вашем шаблоне редактора для String добавьте это в свой шаблон

@Html.TextBox(s => {
...
    if (ViewBag.Width != null )
    {
       s.Width = ViewBag.Width;
    }
 }).Bind(Model).GetHtml()

Ответ 9

Патрик Линдстрем прав с максимальной шириной.

Мне удалось обойти это, установив максимальную ширину и ширину

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

Ответ 10

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

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

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

Ответ 11

Для ASP.NET Core:

<%=Html.TextBoxFor(m => m.Name, new { htmlAttributes = new { style = "width: 50px" } })%>

Ответ 12

Выше ответ Да и Нет. Нам нужно использовать инструмент разработки, чтобы проверить, какие стили используются и модифицируют, они могут иметь максимальную ширину, ширину; Затем создайте собственный важный CSS, чтобы применить его, мой случай:

<style>
    textarea,
    input[type='text'],
    .form-group,
    .form-group-lg,
    .form-horizontal,
    .form-control,     
    .text-box,
    .single-line,
    .multi-line{
        width: 800px !important;
        max-width: 1000px !important;
    }
    .multi-line{
        height: 300px !important;
    }
    .form-horizontal{
        position:absolute;
        padding-left:15%;
    }
</style>

см. результат прикрепленного изображения.

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