Fixed numberbox gets squished on Safari in iOS

[DragonByte Tech]

Affected version

2.0.4

Consider the following HTML:

<xf:formrow rowtype="input"
            label="{{ phrase('dbtech_ecommerce_valid_for') }}">

    <div class="inputGroup">
        <xf:numberbox name="length_amount" value="7" min="1" max="255" />
        <span class="inputGroup-splitter"></span>
        <xf:select name="length_unit" value="day" class="input--inline">
            <xf:option value="day">{{ phrase('days') }}</xf:option>
            <xf:option value="month">{{ phrase('months') }}</xf:option>
            <xf:option value="year">{{ phrase('years') }}</xf:option>
        </xf:select>
    </div>
</xf:formrow>

This is the result in Safari on iOS 11.3:



It works fine when viewing in Responsive Design Mode in Safari on macOS:

Fillip

 

[Chris D]

For reasons I don't quite understand, the max attribute on the number input has an actual impact on what the rendered width of the element is.

At narrower displays we change the inputs inside input groups to width: 100%. If you remove the max="255" you'll probably find it works fine. The +/- buttons exacerbates the issue because without them it would probably also look reasonable - they're not included in whatever calculation the browser is doing, so they eat into the width of the input, rather than the input being wider to take them into consideration.

The way we're fixing this is I'm going to change width: 100% to min-width: 120px; width: 100%; which seems to solve the issue. Which, incidentally, is also a reasonable workaround; you could add style="width: 120px" to the numberbox element.