1

Есть такой код:

<div class="row">
    <div class="col-4">
        <form asp-action="Login" asp-controller="Account" asp-anti-forgery="true">
            <div class="validation" asp-validation-summary="ModelOnly"></div>

            <div class="input-group">

                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">E-mail</span>
                </div>
                <input class="form-control" type="text" asp-for="Email" />

                <span asp-validation-for="Email" />


            </div>

            <div class="input-group">
                <div class="input-group-prepend">
                    <span id="basic-addon1" class="input-group-text">Пароль</span>
                </div>
                <input class="form-control" asp-for="Password" />
                <span asp-validation-for="Password" />
            </div>
            <div class="form-group">
                <input type="submit" value="Войти" class="btn" />
            </div>
        </form>
    </div>
    <div class="flex-row ml-auto"><img style="width:35rem;" src="~/images/soldier.png" /></div>
</div> 

Получается сначала все нормально:

До валидации

Но если вдруг срабатывает validation.js, то получается это:

После валидации

Хочу перенести предупреждение вниз, но не понимаю, какие свойства использовать. Пробовал следующее:

display:block, flex, inline-block white-space:normal Но не помогает

2
  • Пробовали после input прописать тэг <br>?
    – Dj. Kaira
    28 авг 2019 в 14:53
  • Тоже не работает 28 авг 2019 в 14:58

3 ответа 3

0

Если я правильно понял, span можно задать как display: block и не оборачивать дивом. Плюс я так понимаю это bootstrap4, использую редко но возможно input-group это флекс контейнер и потому для span нужно прописать:

input-group {
   flex-wrap: wrap;
}

span {
    flex: 0 0 auto;
    width: 100%;
}

0

Попробовал поместить span после , что так же, как и все остальное не помогло, но если его поместить в еще один div, то все работает.


    <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">E-mail</span>
                    </div>
                    <input class="form-control" type="text" asp-for="Email" />
                </div>
                <div>
                    <span asp-validation-for="Email" />
                </div>

Поторопился с вопросом, все-таки был близок к ответу, прошу прощения. Если есть альтернативные решения, которые еще лучше, я буду благодарен

0
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">E-mail</span>
  </div>
  <input class="form-control" type="text" asp-for="Email" />
</div>
<div asp-validation-for="Email"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.