Bootstrap forms changing size when they are validated

Question

I'm new with frontend, so I'm starting with bootstrap 'to make my life easier (or not), but I'm having some trouble adjusting forms

When validating those fields, the forms change the size, how would can i standardize those sizes?

Already tried to change the css of the form-control, but without success

Here some images from the formns

Forms Without validation

Here the forms when they are validated

Forms with validation

CODE:

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Barco.Nome, htmlAttributes: new { @class = "control-label col-md-4" })

        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.Nome, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Barco.SapId, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.SapId, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.SapId, "", new { @class = "text-danger" })
        </div>

    </div>


    <div class="form-group">
        @Html.LabelFor(model => model.Barco.CapacidadeAgua, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.CapacidadeAgua, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.CapacidadeAgua, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Barco.CapacidadeOleo, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.CapacidadeOleo, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.CapacidadeOleo, "", new { @class = "text-danger" })
        </div>
    </div>



    <div class="form-group">
        @Html.LabelFor(model => model.Barco.Velocidade, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.Velocidade, new { htmlAttributes = new { @class = "form-control " } })
            @Html.ValidationMessageFor(model => model.Barco.Velocidade, "", new { @class = "text-danger" })
        </div>
    </div>



    <div class="form-group">
        @Html.LabelFor(model => model.Barco.Setor, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.Setor, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.Setor, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Barco.Setor, htmlAttributes: new { @class = "control-label col-md-4" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.Barco.Setor, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Barco.Setor, "", new { @class = "text-danger" })
        </div>
    </div>



    @Html.Partial("_ClasseBarco")

    <div class="form-group">

        <div class=" col-md-12 col-md-12">

            <input type="submit" value="Adicionar" class="btn btn-success" />
            <a href="@Url.Action("Index","Barcos")" class="btn btn-default">Voltar </a>


        </div>
    </div>
</div>

score 0 · Answer 1 · answered Aug 28 '18 at 19:28

You just wrap @Html.ValidationMessageFor() tags inside a <div> to get full control on the style:

<div class="col-md-12">
    @Html.EditorFor(model => model.Barco.Nome, new { htmlAttributes = new { @class = "form-control" } })
    <div class="validation-style">
        @Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "text-danger" })
    </div>
</div>

And create your own styles in your css file:

.validation-style {
    font-size: 14px !important;
    // color, font-weight, margin-top, padding-left, etc. :-)
}

If you don't like text-danger, just remove it and define all your styles inside validation-style.

@Html.ValidationMessageFor(model => model.Barco.Nome, "", new { @class = "" })

Bootstrap forms changing size when they are validated

1 Answers1