nam nam - 1 month ago 12
CSS Question

Bootstrap input controls width issue inside a form

In my ASP.NET MVC Core project I'm unable to increase the width of the input controls inside a form. I tried adding the attribute

width=500px
etc to input controls but it always display the same fixed width of the input controls as shown in the image below.

Note: I'm using the latest ASP.NET Core and VS2015 versions that, by default, have bootstrap 3 installed.

Display of the View:

enter image description here

View:

@model myProj.Models.SystemEmail
<div class="row">
<div class="col-sm-3">
<a asp-controller="Home" asp-action="Index">Home</a>
@await Component.InvokeAsync("LeftMenu")
</div>
<div class="col-md-9">
<form asp-action="SysEmailEdit">
<div class="form-horizontal">
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="SystemEmailId" />
<div class="form-group">
<label asp-for="From" class="col-md-1 control-label"></label>
<div class="col-md-11">
<input asp-for="From" class="form-control" />
<span asp-validation-for="From" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="EmailSubject" class="col-md-1 control-label"></label>
<div class="col-md-11">
<input asp-for="EmailSubject" class="form-control" width="500px" />
<span asp-validation-for="EmailSubject" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="EmailBody" class="col-md-1 control-label"></label>
<div class="col-md-11">
<textarea asp-for="EmailBody" class="form-control"/>
<span asp-validation-for="EmailBody" class="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-1 col-md-11">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
<a asp-action="SystemEmails">Back to List</a>
</div>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Answer

Have a look inside /Content/site.css. Microsoft added this and if you remove, its fixed:

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

Also, you can overwrite the max-width:

input,
select,
textarea {
    max-width: none;
}
Comments