CODEWITHSUNDEEP
csshtmltypesdatepickermobile-safari
Newbian
Newbian

Reputation: 35

Vertical alignment is off on date type input

everyone

I am using an HTML5 date type input in a web form.

Here are the html blocks:

<div><!--birthdate-->
    <label for="birthdate" class="col1">Birthdate: </label> 
    <input type="date" class="col2" name="birthdate" id="birthdate" required>
</div><!--END birthdate-->

And the css rules for them:

.col1{text-align:right; width:111px; display:inline-block;}

.col2{width:162px; display:inline-block;}

Breakdown of browser behaviors:

Desktop Safari and Desktop Chrome are both working as expected.

iOS Safari from an iPad: the input field is slightly above its label.

Desktop Firefox displays it as a text-type input field.

I don't have enough rep to post an image, but can send individual answerers one on request.

Does anyone know a decent solution or workaround for this?

Upvotes: 3

Views: 7360

Answers (2)

Razvan Grigore
Razvan Grigore

Reputation: 1898

On Safari iOS 8.3 and Bootstrap 3, it worked for me with this:

<input type="date" style="vertical-align:bottom;">

Upvotes: 2

tinthetub
tinthetub

Reputation: 2196

-To answer your question about Firefox: https://support.mozilla.org/en-US/questions/986096

The input date isn't currently supported, so you'd have to look for an alternative if you really want to make it compatible with the browser.

-As far as the change in alignment, you can try something like this in the CSS:

input[type=date] { 
     padding-top: 2px; /* margin-top: 2px; ... */
}

Change the 2px to whatever works best.

-So that changes in the alignment are only visible when viewed on an iPad, as suggested above in the comments, you will need to use a media query, like such:

@media only screen and (device-width: 768px) {
  /* put input[type=date] {...} here */
}

For more: http://css-tricks.com/snippets/css/ipad-specific-css/

Upvotes: 2

Related Questions