Cramp

It'd be nice to space these buttons out a bit.

Files: 
CommentFileSizeAuthor
#7 639356_radio_vertical_1.png32.17 KBlangworthy
#7 639356_radio_vertical_2.png32.23 KBlangworthy
#7 639354_radio_vertical_1.patch505 byteslangworthy
Passed on all environments. View
#7 639354_radio_vertical_2.patch505 byteslangworthy
Passed on all environments. View
#6 639354_vertical_spacing-1.patch513 bytesSivaji
Passed on all environments. View
#2 639354_vertical_spacing.patch445 byteslangworthy
Passed on all environments. View
#2 639354_vertical_spacing.png31.61 KBlangworthy
#2 639354_original.png41.85 KBlangworthy
#1 639354_radio_spacing.patch483 byteslangworthy
Passed on all environments. View
#1 639354_radio_spacing.png15.33 KBlangworthy

Comments

langworthy’s picture

Status: Active » Needs review
FileSize
15.33 KB
483 bytes
Passed on all environments. View

This patch adds 10px of right padding to only the highlighted radio buttons.

I wonder if we want to space out other radio buttons elsewhere in the UI?

Also, I don't know if there has been discussion about horizontal vs. vertical radio buttons but most of the web accessibility guidelines I could find say that in general horizontal radio buttons should not be used. These guides do say that if horizontal radio buttons must be used be sure to use enough surrounding space to clearly distinguish between options.

langworthy’s picture

FileSize
41.85 KB
31.61 KB
445 bytes
Passed on all environments. View

In the interests of discussing horizontal vs vertical lists I'm including this comment and patches.

Here is one of the primary sources I found stating Lay out your lists vertically. It does also include guidelines if the list must be horizontal.

Webchick tracked down the horizontal commit to issue #547068: D7UX: use Seven for installation / updates

Attached is a patch which changes the radio list to be vertical. It also fixes the spacing between the bottom of the list and the description.

So far I've been unable to fix the spacing issue while keeping the list horizontal.

I've attached a picture of how it looks when the patch is applied and a larger original picture for reference.

webchick’s picture

Issue tags: +Usability

Tagging with Usability to get the usability team's review on this. I agree the horizontal radios do feel weird, although they shorten up the form some. They were in Gábor's original patch in the other issue and never discussed.

Dries’s picture

Vertical looks nicer to me, and feels more 'expected'.

yoroy’s picture

Vertical is the Drupal default anyway. Though this is a possible instance to have them horizontal (no translation issues with longer texts in other languages)

Looking at the patch I see a !important, is that really the only way to achieve this?

Sivaji’s picture

FileSize
513 bytes
Passed on all environments. View

Patch #2 works. I think padding of 2px will make thing to look much better.

langworthy’s picture

FileSize
505 bytes
Passed on all environments. View
505 bytes
Passed on all environments. View
32.23 KB
32.17 KB

I increased the specificity allowing removal of the !important.

Incorporating #6 I've used only top and bottom padding, as I believe the radio buttons should be flush left with the other form elements.

I've included patches and screenshots using both 1px and 2px of top and bottom padding. I think 2px begins to spread the radio elements out a little too much while 1px keeps them grouped nicely while not resulting in too much cramping.

//edit: please disregard my incorrect use of a naming convention for the png's.

webchick’s picture

patch 2 looks better to me, but I'd love someone with actual design sense to chime in on that. :)

yoroy’s picture

Status: Needs review » Reviewed & tested by the community

Definately patch 2.

The only overall issue is that we're fixing little things one at the time, which is probably amounting to a messier total of style rules. But so far haven't been able to get people to take the overall approach, so we do it like this.

langworthy’s picture

yoroy, is it better to use !important rather than increasing specificity by adding another class selector?

Dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to CVS HEAD. Thanks.

yoroy’s picture

Status: Fixed » Reviewed & tested by the community

Only use !important when nothing else works. http://james.padolsey.com/usability/dont-use-important/ explains it nicely. Core themes shouldn't have to rely on using it.

Dries’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)
Issue tags: -Usability, -Novice

Automatically closed -- issue fixed for 2 weeks with no activity.