After generating CRUD pages using EF core, I am now attempting to make edits to one of the cshtml files. The default Bootstrap CSS file that I am using includes various CSS class definitions:
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.form-group {
margin-bottom: 1rem;
font-size: 200px;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
There is a specific text box or element within the code which I anticipate will contain multiple sentences of text. This particular element is nested inside other elements as shown below:
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label asp-for="ChangeSummary" class="control-label"></label>
<input asp-for="ChangeSummary" class="form-control" style="height: 200px; width: 200px; word-wrap: break-word"/>
<span asp-validation-for="ChangeSummary" class="text-danger"></span>
</div>
</div>
</div>
My expectation is that the inline CSS should take precedence over any styles applied from an external CSS file. However, the actual presentation of the textbox does not meet my desired layout.
https://i.sstatic.net/g2y1S.png
I aim for the text within the textbox to align at the top and wrap downwards, similar to the following image:
https://i.sstatic.net/WQJsy.png
Could you provide any insights on what might be causing this issue?