CODEWITHSUNDEEP
htmlcssbootstrap-4
XDAF
XDAF

Reputation: 384

HTML date picker overlaps date input

When I use the following code, the date input fields are cut off and overlapped by the native HTML date picker:

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

This is how it looks like in the browser: von(from), bis (to)

When hovering over the input, one can clearly see that it's the native HTML date picker that overlaps the input fields:

overlaping input

So my question is: How can I solve this problem?

Upvotes: 1

Views: 1664

Answers (3)

JeanPSF
JeanPSF

Reputation: 41

I deal with this everyday using the two steps Alex Morrison explained combined, also, don't forget that you can do both steps multiple times in different media queries to make it more responsive.

Upvotes: 2

user10879733
user10879733

Reputation:

Instead of having to manually add the width every time you have a date input, you could either create a custom class, or target each date in css and do something along the lines of input[type=date]{width:(your width here);}.

Upvotes: 0

Alex Morrison
Alex Morrison

Reputation: 186

You could use one of two options:

  1. Specify the width of the input box to a value that allows the whole date to be clearly visible.style="width:(insert value here)"

  2. Specify a smaller font-size, this will also allow the date to be seen clearly. style="font-size:(insert value here)"

Upvotes: 2

Related Questions