Thursday, 16 April 2015

Latest Safari on Mac/iOS breaks small textboxes

I have been getting a series of complaints about how 2 digit fields in my HTML forms everywhere do not appear to hold 2 digits – making them visually useless for data entry.

 

The problem:

The following HTML is used to produce a textbox input that is intended to show up as a 2 character input – and has been showing up as 2 character inputs since the good ol' HTML4/XHTML days – shows up as a 1 character input on Safari for Mac OS and iOS:

 
<input id="TextBox" maxlength="2" size="1" />
 

The Fix:

To make this Text Box appear correctly on all browsers everywhere requires additional styling, particularly a width statement:

 
<input id="TextBox" maxlength="2" size="1" style="width: 2em" />
 

Width styles are recommended, and absurd:

If it aint broke don’t fix it. This width style has always been the recommended approach of sizing textboxes – however – the unpredictability of “em” measurements (particularly with user font preferences) makes a simple method of putting a small textbox on the screen precariously annoying.

 

Regards,

Twitter

Page Hits