Формы начальной загрузки изменяют размер, когда они проверены - PullRequest
Новая
       6

Формы начальной загрузки изменяют размер, когда они проверены

0 голосов
/ 28 августа 2018

Я новичок в frontend, поэтому я начинаю с bootstrap ', чтобы облегчить мою жизнь (или нет), но у меня возникают некоторые проблемы с настройкой форм

При проверке этих полей формы меняют размер, как я могу стандартизировать эти размеры?

Уже пытался изменить css формы-контроля, но безуспешно

Вот некоторые изображения из форм

Формы без проверки

Здесь формы, когда они проверены

Формы с проверкой

КОД: 

    @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>

1 Ответ

0 голосов
/ 28 августа 2018

Вы просто оборачиваете @Html.ValidationMessageFor() теги внутри <div>, чтобы получить полный контроль над стилем: 

<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>

И создайте свои собственные стили в файле css: 

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

Если вам не нравится text-danger, просто удалите его и определите все ваши стили внутри validation-style. 

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