Блог

Главная - Вопросы по программированию - получение метки ошибки для сопоставления с вводом в flex-wrap

получение метки ошибки для сопоставления с вводом в flex-wrap

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

В приведенном ниже примере я хотел бы привести сообщение о проверке в вертикальное соответствие с вводом, чтобы точка маркера примерно совпадала с левой частью ввода без использования явных значений ширины.

 .form-control__input {
  display: flex
}

.form-control__input.form-control__vertical {
  flex-direction: column;
  justify-content: flex-start
}

.form-control__input.form-control__horizontal {
  flex: 1 1;
  flex-wrap: wrap;
  align-items: center
}

.form-control__input.form-control__horizontal .form-control__wrapper {
  flex: 1 1
}

.form-control__input.form-control__horizontal [role=alert] {
  width: 100%
}  
 <div class="form-control__input form-control__horizontal"><label for="ctrl5" id="ctrl5-label" class="label__default">Horizontal</label>
  <div class="form-control__wrapper"><input autocomplete="off" class="input__default form-control input__invalid" id="ctrl5" aria-invalid="true" aria-describedby="ctrl5-error" maxlength="100" type="text"></div>
  <div id="ctrl5-error" aria-hidden="false" role="alert">
    <ul class="current-errors error-label__container">
      <li data-selector="form-error">foo bar</li>
    </ul>
  </div>
</div>

Ответ №1:

display: grid В этом случае я бы использовал display: flex вместо, чтобы вы могли выровнять элемент, подобный таблице.

Вы можете присвоить имя области каждому div и расположить каждую область в родительском grid-template-area свойстве

 .form-control__input.form-control__vertical {
  flex-direction: column;
  justify-content: flex-start
}

.form-control__input .label_default {
      grid-area: label;
}

.form-control__input.form-control__horizontal {
  display: grid;
    grid-template-areas: "label input" ". error";
    grid-template-columns: min-content;
}

.form-control__input.form-control__horizontal .form-control__wrapper {
  grid-area: input;
}

.form-control__input.form-control__horizontal [role=alert] {
  grid-area: error;
}

.form-control__input.form-control__horizontal [role=alert]  ul {
  list-style-position: inside;
    padding-left: 0;
}  
 <div class="form-control__input form-control__horizontal"><label for="ctrl5" id="ctrl5-label" class="label__default">Horizontal</label>
  <div class="form-control__wrapper"><input autocomplete="off" class="input__default form-control input__invalid" id="ctrl5" aria-invalid="true" aria-describedby="ctrl5-error" maxlength="100" type="text"></div>
  <div id="ctrl5-error" aria-hidden="false" role="alert">
    <ul class="current-errors error-label__container">
      <li data-selector="form-error">foo bar</li>
    </ul>
  </div>
</div>

Ответ №2:

Самый простой способ добиться этого — заменить flex-wrap: wrap на flex-wrap: nowrap .

В случае, если вы хотите сохранить flex-wrap to wrap (я не мог спросить в комментариях), вы могли бы сделать отдельные div элементы, которые должны быть wrapped .