[MGNLUI-3740] Improve styling of radio buttons in backend form Created: 05/Jan/16  Updated: 01/Feb/16  Resolved: 26/Jan/16

Status: Closed
Project: Magnolia UI
Component/s: forms
Affects Version/s: 5.4.3
Fix Version/s: 5.4.5

Type: Bug Priority: Neutral
Reporter: Christopher Zimmermann Assignee: Evzen Fochr
Resolution: Fixed Votes: 0
Labels: quickwin
Remaining Estimate: 0d
Time Spent: 6h 20m
Original Estimate: Not Specified

Attachments: PNG File Screen Shot 2016-01-18 at 11.11.51.png     PNG File Screen Shot 2016-01-18 at 11.14.13.png     PNG File select-bad.png     PNG File select-good.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: Light Development 1.0
Sprint: Kromeriz 28
Story Points: 2

 Description   

Horizontal radio button option groups are hard to read and look bad because the spacing between the options is less than the spacing between the button and the text. Also the vertical alignment to the label is bad. See attached images.

To do:
Make the spacing between radio option group items greater.
Align the options with the label.
Ensure the changes work under these circumstances:

  • Vertical and horizontal aligned option groups.
  • Radio buttons and checkboxes.
  • Looks good on these fields: OptionGroup, Switchable, Checkbox

Tip:
In some quick experiments, this achieved the nice look in the screenshot. But not sure if this works across all the circumstances outlined above.

.v-radiobutton

{ padding-right: 15px; }

.v-select-optiongroup

{ padding-top: 3px; }

 Comments   
Comment by Evzen Fochr [ 18/Jan/16 ]

can i ask for pic please?

Comment by Evzen Fochr [ 18/Jan/16 ]

This can be seen only on mac's.

Comment by Mikaël Geljić [ 21/Jan/16 ]
  • This breaks vertical alignment of label vs. options in regular FormLayouts, e.g. in messages app
    • if this is specific to our dialogs, prefix it
  • Right padding should also be specialized for select fields with horizontal layout, e.g. under .v-select-optiongroup-horizontal selector
Generated at Mon Feb 12 09:09:37 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.