TextAreaFor 无法设置宽度答案

【问题标题】：TextAreaFor Cannot Set WidthTextAreaFor 无法设置宽度
【发布时间】：2014-04-09 09:46:00
【问题描述】：

我无法在 atextarea 中设置宽度或列。行/高度工作得很好。谁能帮忙谢谢！

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)
    @Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10})
    @Html.HiddenFor(model => model.UserName, new { UserName = @User.Identity })

    <div class="form-group">
        <div class="col-md-10">
            <input type="submit" value="Submit Feedback" class="btn btn-default" />
        </div>
    </div>
}

任何建议或提示将不胜感激！谢谢

呈现的 HTML 是（出于安全原因，我删除了名称和值文本：

<form action="/feedback/create" method="post"><input name="" type="hidden" value="">        
<textarea name="Comments" id="Comments" rows="10" cols="60"></textarea>
<input name="UserName" id="UserName" type="hidden" value="" username="System.Security.Principal.WindowsIdentity">        

<div class="form-group">
        <div class="col-md-10">
            <input class="btn btn-default" type="submit" value="Submit Feedback">
        </div>
 </div>

编辑：

我可以通过 CSS 设置文本区域的宽度，但只能设置到一定程度（可能是屏幕的 15%）

【问题讨论】：

页面中呈现的 HTML 是什么？
我更新了问题以显示 HTML

标签： twitter-bootstrap razor twitter-bootstrap-3 asp.net-mvc-5

【解决方案1】：

所以我想通了，我相信这是导入到 ASP.NET MVC5 项目的引导程序的问题。答案很简单。只需设置 CSS 即可

    max-width: 1000px;
    width: 1000px;

这修复了所有数据类型。文本区域、输入等。

**** 2014 年 8 月 26 日更新 ****

更改了我的答案以反映已发布的评论。使用百分比而不是 px 来保持响应能力。 CSS 应该是：

    max-width: 100%;
    width: 100%;

**** 2016 年 8 月 29 日更新 ****

这已通过 Bootstrap 3 修复。添加应用上述样式的类 form-control

     @Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" })

【讨论】：

它也对我有用。我不认为它是完美的解决方案，但它是迄今为止我能找到的唯一解决方案。我已经搜索过了......
@MikeGO10590：检查一下：如果您将最大宽度更改为 100% 而不是 1000px，您将恢复引导调整大小的功能。你甚至不需要费心设置宽度。
自从提出这个问题后，这可能已在 BS3 中修复。使用rows 是首选答案。 @Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" }).
谢谢@Jess 我更新了我的答案以包含您的评论

【解决方案2】：

这似乎是为了防止脚手架视图生成全宽输入表单。

但是现在我们知道它正在被设置，我们可以在本地类中或直接在元素上覆盖它（为了简单起见，如下所示）。

关键是要记住设置 max-width 以覆盖 site.css 中的那个以及 width CSS 属性。

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

【讨论】：

【解决方案3】：

我遇到了同样的问题，发现我的 Site.css 中的以下 CSS 是原因（我已将其注释掉）。

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

【讨论】：

真的很好。我刚刚从那里删除了 textare 并且它起作用了。
哦谢谢谢谢谢谢！！就是这样！（愚蠢的默认 Site.css！）真正令人沮丧的是，我很确定我之前已经处理过这个问题并且显然忘记了。 (D'OH!) ;)

【解决方案4】：

你可以添加一个类属性：

@Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10, @class="form-control" })

【讨论】：

这几乎可以工作，但我不能将其设置为 div 的全宽！
如果您将form-control 类添加到您的文本区域，您可以使输入扩展到其父容器。我已经更新了我的答案。
我试过了（从 bootstrap API 复制代码），但它仍然达到最大值
@Queti M. Porta 您在解决方案中所说的是真的。添加表单控件类将使输入扩展到其父控件，但仅扩展至一定程度。它不会扩展超过一定的宽度。

【解决方案5】：

您的代码对我来说很好用。查看fiddle demo

问题出在style=width:something

最好检查 CSS 并尝试在 firebug/chrome 控制台的帮助下修复

【讨论】：

这几乎可以工作，但我不能将其设置为 div 的全宽！