When I run/debug in Chrome things look quite a bit different than iOS WebKit in the simulator.
Net Summary of Issues Here:
- The Date picker seems like it is center-aligned, whereas the select is right-aligned
- The range seems to have overflow issues.
Here’s what happens if I add the attribute style="text-align: right;"
to the date picker:
Now, it seems to have the same overflow issues that the range
input does.
I’m only posting this in the event that someone can spot an immediate issue with the markup structure or use of classes that might be contributing to these particular issues – would love to hear about it.
Here’s the markup
<div class="list padding">
<label class="item item-input item-select item-stacked-label padding">
<span class="input-label">Location</span>
<select
ng-model='location',
ng-options='location as location.name + ", " + location.city for location in locations | orderBy:"name" track by location.location_key'>
</select>
</label>
<label class="item item-input padding">
<span class="input-label">Date</span>
<input type="date" ng-model='range.endDate'>
</label>
<label class="item item-input padding">
<span class="input-label">Days:<sup class='asterisk'>*</sup> {{days}}</span>
<input type="range" name="days" min="0" max="30" value="7" ng-model="days">
</label>
</div>
It’s painful to debug this even with Livereload because I cannot see the effective CSS or DOM tree like I can in Chrome or Safari. It’s kinda pointless to create a CodePen for this as I see it only happens in iOS WebKit.
Is no one else having layout issues with form elements in iOS on smaller devices? The screenshots were running on the 5s simulator.