如何在html razor视图mvc4中增加TextArea的大小?

时间:2016-05-03 04:11:19

标签: html asp.net-mvc-4 razor model-validation

我的视图中有一个名为描述的文本区域字段。我希望增加该领域的规模。

我的代码

  <div class="col-sm-3">
  <div class="form-group">
  <span style="color: #f00">*</span>
   @Html.LabelFor(model => model.Description, new { @class = "control-label" })
   @Html.TextAreaFor(model => model.Description, new { @class = "required", style = " rows=10, columns=40" })
   @Html.ValidationMessageFor(model => model.Description)
       </div>
     </div>

我的TextArea

TextArea

我想带来如下图所示的那样

Wanted Output

所以我在textarea字段中给出了行和列。它增加了文本区域的大小。但是当我将页面缩小到手机大小意味着所有字段都缩小了。但是这个textarea字段不会缩小到页面大小。这就是问题

我对我的田地进行了验证。我想用红色显示验证。我正在使用模型验证。所以请任何人为这两个问题提供解决方案。

提前谢谢..

7 个答案:

答案 0 :(得分:11)

试试这个:

  @Html.TextAreaFor(model => model.Description, 10,40, htmlAttributes: new {style="width: 100%; max-width: 100%;" })

答案 1 :(得分:6)

虽然这已经得到了回答,但有人可能仍然需要这个。

 @Html.TextAreaFor(model => model.comments, 
 new { @cols = "100", @rows = "8", @style="width:100%;"})

答案 2 :(得分:0)

RowsCols不属于style标记。它是textarea的独立属性。你可以写如下。

@Html.TextAreaFor(model => model.Description, new { @class = "required", @cols = 40, @rows = 10})

答案 3 :(得分:0)

Remove textArea element from site.css file. In site.css textarea max-width set as 280px;
Do like

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

答案 4 :(得分:-1)

@Html.TextAreaFor(m => m.Description, 10, 40, new { @class = "form-control required", style="max-width:75% !important;" })

答案 5 :(得分:-1)

  @Html.TextAreaFor(model => model.Description, new { @class = "form-control", @cols = 10, @rows = 10,@style="resize:both;" })

答案 6 :(得分:-1)

@ Html.TextAreaFor(model => model.Description,10,40,new {@class =“ required”})