Средство выбора даты HTML перекрывает ввод даты
Когда я использую следующий код, поля ввода даты обрезаются и перекрываются встроенным средством выбора даты HTML:
<div class = "form-check form-check-inline">
<div class = "input-group ml-2">
<div class = "input-group-prepend">
<label class = "input-group-text" for = "date_from">von</label>
</div>
<input th:placeholder = "#{date.format}" th:field = "*{from}" type = "date" max = "9999-12-31" min = "1000-01-01"
class = "form-control" id = "date_from">
</div>
<div class = "input-group ml-2">
<div class = "input-group-prepend">
<label class = "input-group-text" for = "date_to">bis</label>
</div>
<input th:placeholder = "#{date.format}" th:field = "*{to}" type = "date" max = "9999-12-31" min = "1000-01-01"
class = "form-control" id = "date_to">
</div>
</div>
Вот как это выглядит в браузере:
При наведении указателя мыши на поле ввода можно четко увидеть, что это родное средство выбора даты HTML перекрывает поля ввода:
Итак, мой вопрос: как я могу решить эту проблему?
Было бы полезно увидеть любой пользовательский CSS, который вы используете на этой странице, или если вы можете воссоздать его на Fiddle или Codepen.
@crazymatt Я не использую собственный CSS. Только Bootstrap с Thymeleaf в качестве движка шаблонов для Spring Boot.
Ответы 3
Вы можете использовать один из двух вариантов:
Задайте ширину поля ввода таким образом, чтобы вся дата была четко видна.
Задайте меньший размер шрифта, это также позволит четко видеть дату.
style = "width:(insert value here)"
Я сталкиваюсь с этим каждый день, используя два шага, которые объяснил Алекс Моррисон, вместе взятые. Также не забывайте, что вы можете выполнять оба шага несколько раз в разных медиа-запросах, чтобы сделать его более отзывчивым.
Вместо того, чтобы вручную добавлять ширину каждый раз, когда вы вводите дату, вы можете либо создать собственный класс, либо настроить таргетинг на каждую дату в css и сделать что-то в соответствии с input[type=date]{width:(your width here);}.
Использовать тип ввода как текст.