Form element alignment on iOS

When I run/debug in Chrome things look quite a bit different than iOS WebKit in the simulator.

image

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:

image

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.

Using a combo of Chromes excellent device emulator -> under the Emulation tab, change to iPhone 5, and running iPhone 5s simulator simultaneously, I was able to resolve most of it.

I can bump the date over using some padding.

.filter-date {
  text-align: right;
  padding-right: 20px;
}

The range however – seems to be a bug in WebKit. No matter if you set the width, margin, padding, whatever, it doesn’t work. The range thumb will adhere to width, padding or margin constraints, but the actual track is drawn off the edge of the parent element no matter what I do. Probably some weird corner case not handled.

This is what I ended up with:

.filter-range::-webkit-slider-runnable-track {
  padding-right: 30px !important;
}

Which looks like this with the thumb as far right as it will slide:

image

There is no way AFAICT to make the track not spill over – perhaps a side-effect of being inside a <label> tag?