CODEWITHSUNDEEP
cssgoogle-chromesafariios7
Rémi Breton
Rémi Breton

Reputation: 4259

Date inputs cannot be aligned right on iOS7

tl;dr, Here the test, iOS7 can't right-align date inputs: http://cdpn.io/dxjHy

Consider this HTML:

<input type="date" id="test">

And this CSS:

#test {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  text-align:right;
  padding:30px;
  width:400px;
  font-size:20px;
}

Safari on iOS7 doesn't want to right-align the text in the date input. My opinion is that Chrome's interpretation is the correct one. Any ideas on how to make Safari cooperate?

Chrome 30:

Chrome

Safari Mobile on iOS7, iPad:

iOS7

Upvotes: 5

Views: 3552

Answers (3)

Sandersjr2
Sandersjr2

Reputation: 57

Using Hoshibe css trick did help but had to Add "left: 0;" to center the input box and not have overflow.

div{
    position:relative;
    width: 99%; <!--Can be any width you need.-->
}
input[type="date"]{
    position:absolute;
    width:auto;
    right:0;
    left: 0;
}

Then Adding below code to input[type="date"] will right align the text.

text-align: right;
display: block;

This fixed the issue in iOS 7 and 8.

Upvotes: 0

R&#233;mi Breton
R&#233;mi Breton

Reputation: 4259

I've found a solution that works great. This seems to be the culprit, in Safari's stylesheet of input[type=date]

display: -webkit-inline-flex;

Add this to your CSS...

input[type=date] {
    display:block;
    -webkit-appearance:button;
    -moz-appearance:button;
    appearance:button;
}

...and now your input will be able to understand text-align:right; correctly.

Upvotes: 7

Hoshibe
Hoshibe

Reputation: 63

We had the same problem in my office, we made a workaround.

<div> 
    <input type="date" id="test">
</div>

and for the css

div{
    position:relative;
    width:100%
}
input[type="date"]{
    position:absolute;
    width:auto;
    right:0;
}

Hope, it can help you.

Upvotes: 3

Related Questions