Изменить ширину div сообщения об ошибке проверки
Вот как отображается сообщение об ошибке после добавления проверок. Требуется только ширина этого div. Как изменить ширину, чтобы сообщение об ошибке помещалось в одну строку? Если есть какой-либо другой способ проверки переднего плана, предложите его.
.age {
width: 53px;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.15px;
color: rgba(0, 0, 0, 0.6);
}
.input-group {
margin-bottom: 9px;
position: relative;
}
.input-group__label {
z-index: 5;
display: block;
position: absolute;
top: 0;
line-height: 40px;
color: #aaa;
left: 5px;
padding: 0 7px;
transition: line-height 200ms ease-in-out, font-size 200ms ease-in-out, top 200ms ease-in-out;
pointer-events: none;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.15px;
color: rgba(0, 0, 0, 0.6);
}
.input-group__input {
width: 100%;
height: 40px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px !important;
padding: 0 10px;
}
<div class = "input-group age">
<input class = "input-group__input form-control is-invalid"
type = "text"
placeholder = " "
name = "age"
id = "validationError"
autocomplete = "off"
required />
<label class = "input-group__label" for = "age">Age</label>
<div class = "invalid-feedback">
Please enter an age between 35-74
years.
</div>
</div>@diegod Вот в чем дело. Я не могу изменить ширину .age. Такая ширина должна быть.
.invalid-feedback{ширина: максимальное содержание;}
@JaswinderKaur позиция элемента должна быть абсолютной, чтобы это работало. в то время как приведет к перекрытию от других элементов
Ответы 4
Установите ширину блока недействительного отзыва на максимальное содержимое.
Ключевое слово max-content sizing представляет максимальную ширину или высоту содержимого. Для текстового содержимого это означает, что содержимое вообще не будет переноситься, даже если оно вызывает переполнение.
.invalid-feedback{
width: max-content;
}
Вот страница MDN по этому поводу: https://developer.mozilla.org/en-US/docs/Web/CSS/max-content
Вы можете сделать "группу ввода" "позиция: относительная" и добавить к "недействительной обратной связи" "позиция: абсолютная, ширина: максимальное содержание"
Абсолютная позиция, чтобы сделать это на более высоком уровне, чем то, что было бы ниже
https://codesandbox.io/s/naughty-colden-zg3let?file=/src/styles.css
Если вы используете фрагмент кода, вам будет проще проверить свой ответ. При редактировании это кнопка с <>
Я не знаю, как использовать фрагмент, просто песочница
В следующий раз, когда вы будете вводить вопрос или редактировать его, найдите кнопку с надписью <>.
Вы можете исправить это, просто добавив значение ширины к метке.
.invalid-feedback {
width: 250px; /* OR max-content */
}
Вы не можете изменить ширину своего элемента invalid-feedback, потому что его максимальная ширина контролируется его родителем input-group age. Я бы предложил удалить класс age и вместо этого применить его к его первым двум дочерним элементам, за вычетом третьего дочернего элемента invalid-feedback.
Примечание. Я также увеличил максимальную ширину класса age, иначе значки проверки загораживают вид текста проверки из-за нехватки места.
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<style>
.age {
max-width: 96px;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.15px;
color: rgba(0, 0, 0, 0.6);
}
.input-group {
margin-bottom: 9px;
position: relative;
}
.input-group__label {
z-index: 5;
display: block;
position: absolute;
top: 0;
line-height: 40px;
color: #aaa;
left: 5px;
padding: 0 7px;
transition: line-height 200ms ease-in-out, font-size 200ms ease-in-out, top 200ms ease-in-out;
pointer-events: none;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.15px;
color: rgba(0, 0, 0, 0.6);
}
.input-group__input {
width: 100%;
height: 40px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px !important;
padding: 0 10px;
}
</style>
<div class = "input-group">
<input class = "age input-group__input form-control is-invalid"
type = "text"
placeholder = " "
name = "age"
id = "validationError"
autocomplete = "off"
required />
<label class = "age input-group__label" for = "age">Age</label>
<div class = "invalid-feedback">
Please enter an age between 35-74 years.
</div>
</div>Это работает. Но элементы рядом с ним пострадают. Но я могу изучить это. Спасибо.
панель ошибок не имеет ширины. Вы можете добавить ширину в набор правил .age, например
width: 100%, и он займет достаточно места, чтобы поместить все в одну строку.