Disable control wrapping in MVC - css

Question

I have a view that uses the following code.
<div class="tab-pane fade active" id="tab_1">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.ID, "Facility Name fwefwf wefwefwef wefwefe", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("ID", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.ID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ResidentID, "ResidentID", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ResidentID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ResidentID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ClaimAmount, "Claim Amount", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ClaimAmount, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ClaimAmount, "", new { #class = "text-danger" })
</div>
</div>
When the page is full screen the wrapping causes the controls to appear on the next line, instead of beside the label.
WrappingControls
How can I style the controls to have the textboxes appear on the same line as the labels?

Answer 1

You can try to use <div class="form-group row"> to replace <div class="form-group">
Here is a demo:
<form>
<div class="tab-pane fade active" id="tab_1">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group row">
#Html.LabelFor(model => model.ID, "Facility Name fwefwf wefwefwef wefwefe", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<select asp-for="Id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
#Html.ValidationMessageFor(model => model.ID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.ResidentID, "ResidentID", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ResidentID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ResidentID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.ClaimAmount, "Claim Amount", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ClaimAmount, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ClaimAmount, "", new { #class = "text-danger" })
</div>
</div>
</div>
</form>
result:
If it is still not work,see the location of
in your layout and put it into <footer></footer>like this:
<footer>
©2020--Consultants For Long Time Care
</footer>