ASP.NET MVC中TextArea设置宽度样式后无法拉宽的问题

问题现象 #

使用@Html.TextAreaFor生成id为businessJustification的文本域时，尝试通过内联样式设置宽度为1000px，控件宽度无任何变化，始终无法拉宽到更大尺寸，仅支持缩小宽度；调整页面间距后问题依然存在，测试将宽度改为200px时控件尺寸仍保持不变。

复现代码 #

问题代码片段 #

@Html.TextAreaFor(x => x.businessJustification, new { id = "businessJustification", name = "businessJustification", @cols = 40, @rows = 3,@style="width: 1000px;"})

完整页面源码 #

@{
    ViewBag.Title = "Software Request";
}
@model project1.Model.TicketModel

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>


<body style="background-color:#D1D3D4;"></body>
<div class="jumbotron" style="background-color:#D1D3D4;">
    <img src="/Images/TECH_BARlogoBLACK.png" style="width:1000px;height:200px;" class="animate__heartBeat">
    <p class="lead" span style="background-color: #FFFF00;">Software Request</p>
    <br>
    @using (Html.BeginForm(FormMethod.Post))
        {
    <p class="text-left"><b>Enter Computer Name:</b></p>
     @Html.TextBoxFor(x => x.computerName, new { id = "computerName", name = "computerName"}) 
     <p style="font-size: 14px; text-align: left;"><b>To obtain your Computer Name: </b>Click Start (bottom left windows icon) and type in System Information, On the 5th line, your Computer Name is listed as the System Name <br></p>
    <p class="text-left" style="width: 1000px;"><b>Business Justification:</b> <br> 


    @Html.TextAreaFor(x => x.businessJustification, new { id = "businessJustification", name = "businessJustification", @cols = 40, @rows = 3,@style="width: 1000px;"}) </p>



    <label for="Software">Select the Software(s) you need!</label>
    <br>
    @Html.DropDownListFor(model => @Model.selectedSoftwareList, new MultiSelectList(Model.softwareList, "Text", @Model.selectedSoftwareList),
                                                    new
                                                    {
                                                        id = "_SelectedSoftwareList",
                                                        @class = "form-control multiselect-dropdown",
                                                        multiple = "true",
                                                        style = "width:200px;height:300px;",
                                                        data_placeholder = "Select Software"
                                                    })
    <br>
    <br><button type="submit" class="btn-primary btn-lg" style="font-size: 20px">Submit</button>
        }

</div>


<style>
h1 {
    text-align: center;
}

p {
    text-align: center;
}
.buttonBig {
    display: block;
    width: 10%;
    border: none;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
}
</style>

问题效果截图 #

问题原因 #

• 项目默认引入的Bootstrap框架会给textarea等表单元素设置max-width: 100%默认样式，文本域宽度无法超出父容器实际宽度，设置大于父容器宽度的width值不会生效。
• 代码存在HTML结构错误：<body style="background-color:#D1D3D4;"></body>提前自闭合，后续所有页面内容实际处于body标签外部，浏览器自动修正DOM结构时会打乱样式继承逻辑。
• 全局样式对所有p标签设置了text-align: center，包裹文本域的p标签虽然添加了text-left类，但选择器优先级相同，样式覆盖存在冲突。
• 手动给TextArea设置的@cols=40属性会生成默认列宽属性，和自定义宽度样式存在冲突。

修复方案 #

1. 修正HTML结构错误，移除提前闭合的body标签，将所有页面内容包裹在body标签内部。
2. 移除TextArea上多余的@cols属性，在内联样式中添加max-width: none覆盖Bootstrap的默认宽度限制，同时补充盒模型属性避免尺寸计算偏差，修改后代码如下：

@Html.TextAreaFor(x => x.businessJustification, new { 
    id = "businessJustification", 
    name = "businessJustification", 
    @rows = 3,
    @style="width: 1000px; max-width: none; box-sizing: border-box;"
})

3. 若需要保持文本域所在段落左对齐，直接给对应p标签添加内联样式text-align: left，避免全局p标签样式覆盖。

内容的提问来源于stack exchange，提问作者MystifiedSky