Image for post
Image for post

Making form inputs more obvious by removing padding

Paul Stanton
Nov 2, 2017 · 3 min read

I recently did a chunk of work on the Pulsar design system to improve how we align form elements against a common 12 column grid, and all sorts of fun little things crept out of the woodwork that we’re still tweaking.Normally, when you’re styling up your forms you’d add padding to both the left and right sides, right? It’s pretty much standard practice everywhere.

Previously, we used specific pixel values to set the widths of our inputs which—while great from a consistency point of view—was awful in terms of responsiveness. We worked out a responsive 12 column grid, three of which would be our main form labels, and the remaining 9 made available to form inputs, with the default being set to 4 columns wide.

When we used pixel widths, our inputs were designed with internal padding on both the left and right edges, which was fine when we could rely on a developer choosing the most appropriate width class, like .form__group--small to suit their expected input widths.

Image for post
Image for post
The behaviour before, when we knew exactly how wide a given input would be

However, that padding caused us a problem when we allowed form inputs to be completely responsive, growing and shrinking based on the widths of the responsive columns, depending on the width of the value there’s a chance that when the text overflows, the right hand padding hides the fact that the value is overflowing.

Image for post
Image for post
At certain widths, our 600 looks like 6

Luckily, we’re able to fix this easily by removing the right hand padding, allowing the value to extend right to the edge of the input. If, at some point, we add RTL language support to our software then we’ll need to remove the left instead.

Image for post
Image for post
It’s not as pretty, but it’s obvious that the value is larger than 6

It’s not as visually pleasing, but it makes it much more obvious that the value extends beyond the visual container and does as much as we can to remove ambiguity and the opportunity for error.

Pulsar

The product design team at Jadu

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store