Bootstrap: input[type=date] with empty value shrunken height on mobile

[rixlabs]

On iPad, an input of type date that doesn't have any initial value appear smaller until touched or a date selected.

I tested the same situation on Chrome for Android and there is working fine

Reduced test case here: http://jsfiddle.net/ctesyxxx/1/
Tested on: Safari for iPad , iOS 10.1.1

[ianbrandt]

@rixlabs Same here for both Chrome and Safari on iPhone.

Quick-and-dirty workaround (YMMV):

input[type="date"] {
    min-height: 2.5rem;
}

[rixlabs]

@ianbrandt I did exactly the same...

[ianbrandt]

Updated my workaround to also account for https://github.com/twbs/bootstrap/issues/18842:

input[type="text"],
input[type="email"],
input[type="date"] {
    height: 2.375rem;
}

So far tested on Safari and Chrome on iOS and macOS, and Edge on Windows 10.

(In case it's not obvious you'll want to add any other input types you use, e.g. "password", "url", etc.)

[jckh1234]

I found it not only shorten the but also move the input slightly lower when placing inside a div.

https://stackoverflow.com/questions/49932842/html5-input-type-date-not-vertical-align-property-in-mobile-browser-when-value-i

[parisiam]

I encountered exactly the same problem in ios 11 and bootstrap 4.1.2: the temporal fields shrink if no initial value is selected.
https://jsfiddle.net/parisiam/0teuo9dy/50/
Another solution is to combine the field inside an input group with an icon (a calendar for instance).

[pekanct]

My solution was:

<input type="text "placeholder="Select a date" onfocus="$(this).hide().next().attr('hidden',false).focus();"/>
<input type="datetime-local"  hidden="true">

[mdo]

This should’ve been solved in v4.1.3 when we added fixed heights to inputs.

[maschad96]

@mdo , I see that the fixed height has been added and so that fixes the collapsing issue.. quick question though. Are you aware of any way to prevent the hidden value issue? Although the height is no longer collapsed, I am unable to see a pre-populated value on an input[type="date"] unless I first focus on it, then the value does show.

[rixlabs]

I've tested again with the last version and it is indeed fixed!

Check here : http://jsfiddle.net/7fxdt260/

Tested on: Safari for iPad , iOS 10.1.1

[hotsoft-desenv2]

@mdo I think it's not solved yet... I'm using the latest version but the problem still present....

[karlbeecken]

I still have the problem, but this works for me:
<input type="text "placeholder="Select a date onfocus="$(this).hide().next().attr('hidden',false).focus();"/> <input type="datetime-local" hidden="true">

[mdo]

@MartijnCuppens @ysds #28917 mentions the fixed height change, but I didn't see that in the diff. Bad cross-reference, or something I'm missing?

[MartijnCuppens]

This demo is an example of v4-alpha, this seems to be fixed in the meantime:

Before:

After:

[winner]

My solution was:

<input type="text "placeholder="Select a date" onfocus="$(this).hide().next().attr('hidden',false).focus();"/>
<input type="datetime-local"  hidden="true">

I solved critical issue on the iphone with your solution.
Thanks very much!!!