Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-3740

Improve styling of radio buttons in backend form

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Neutral Neutral
    • 5.4.5
    • 5.4.3
    • forms

      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; }

        Acceptance criteria

              efochr Evzen Fochr
              czimmermann Christopher Zimmermann
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Created:
                Updated:
                Resolved:

                  Bug DoR
                  Task DoD

                    Estimated:
                    Original Estimate - Not Specified
                    Not Specified
                    Remaining:
                    Remaining Estimate - 0d
                    0d
                    Logged:
                    Time Spent - 6h 20m
                    6h 20m