I started using the Yeti template from bootswatch and there were 3 problems, my textarea misaligned from my other fields, and the spaces between the fields increased a lot.
Print the screen in the image below:
The sizes of the dropdown fields that receive data via ajax have reduced, when I was only using the bootstrap these problems were not occurring.
Css and Html:
.hide-span {
display:none;
}
.show-span {
display:block;
}
.fail {
color:red;
}
.icon-success {
color:green;
}
.icon-error {
color:green;
}
.margim-element {
margin:20px;
}
.space {
padding :3px;
}<div class="form-group">
<div class="row">
<div class="col-xs-3 space" id="div-id">
@Html.LabelFor(m => m.TicketId, "Ticket ID")
@Html.TextBoxFor(m => m.TicketId, new { @class = "form-control ", @readonly = "readonly", id = "ticketId" })
@Html.ValidationMessageFor(m => m.TicketId, "", new { @class = "text-danger" })
<label id="message-id"></label>
</div>
<div class="col-xs-3 space" id="div-tickettype">
@Html.LabelFor(m => m.TicketTypeId, "Type")
@Html.DropDownList("TicketTypeId", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.TicketTypeId, "", new { @class = "text-danger" })
<label id="message-tickettype"></label>
</div>
<div class="col-xs-3 space" id="div-priority">
@Html.LabelFor(m => m.PriorityId, "Priority")
@Html.DropDownList("PriorityId", null, htmlAttributes: new { @class = "form-control has-feedback", aria_describedby = "inputSuccess2Status" })
@Html.ValidationMessageFor(m => m.PriorityId, "", new { @class = "text-danger" })
<label id="message-priority"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-3 space" id="div-product">
@Html.LabelFor(m => m.ProductId, "Product")
@Html.DropDownList("ProductId", null, htmlAttributes: new { @class = "form-control", required = "required" })
@Html.ValidationMessageFor(m => m.ProductId, "", new { @class = "text-danger" })
<label id="message-product"></label>
</div>
<div class="col-xs-3 space" id="div-subproduct">
@Html.LabelFor(m => m.SubProductId, "Sub Product")
@Html.DropDownList("SubProductId", null, htmlAttributes: new { @class = "form-control", required = "required" })
@Html.ValidationMessageFor(m => m.SubProductId, "", new { @class = "text-danger" })
<label id="message-subproduct"></label>
</div>
<div class="col-xs-3 space" id="div-task">
@Html.LabelFor(m => m.TaskId, "Task")
@Html.DropDownList("TaskId", null, htmlAttributes: new { @class = "form-control", required = "required" })
@Html.ValidationMessageFor(m => m.TaskId, "", new { @class = "text-danger" })
<label id="message-task"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-3 space" id="div-version">
@Html.LabelFor(m => m.VersionId, "Version")
@Html.DropDownList("VersionId", null, htmlAttributes: new { @class = "form-control", required = "required" })
@Html.ValidationMessageFor(m => m.VersionId, "", new { @class = "text-danger" })
<label id="message-version"></label>
</div>
@RenderSection("Status", false)
@RenderSection("SlaExpire", false)
</div>
</div>
<div class="form-group">
<div class="row">
@RenderSection("Designated", false)
@RenderSection("IdExternal", false)
</div>
</div>
<div class="form-group" id="div-title">
@Html.LabelFor(m => m.Title, "Title")
@Html.TextBoxFor(m => m.Title, new { @class = "form-control col-md-12", id = "field-title" })
@Html.ValidationMessageFor(m => m.Title, "", new { @class = "fail" })
<label id="message-title"></label>
</div>
<div class="form-group" id="div-description">
@RenderSection("DescriptionLabel", false)
<textarea class="form-control form-control-sm" name="description" , id="field-description" rows="8"></textarea>
<label id="message-description"></label>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Files, "File Input")
<br />
@Html.TextBoxFor(m => m.Files, null, new { type = "file", @class = "input-file" })
</div>