Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-2749 More subtle looking help/validation messages in forms
  3. MGNLUI-3559

Change help and validation messages in forms to look less blocky and alarming

    XMLWordPrintable

    Details

      Description

      MGNLUI-2749 asks for a more set-back, subtle visual appearance of form help, warnings and error messages. Our current message look to blocky and too alarming.

      Please change the visual appearance of help, warning and error messages so that it corresponds more to the original design:

      • The message box has the same width as the value part of a field they're pointing to. In general, it should cover the right part of a form, which is form width minus left/right padding minus label width.
        • Left edge is where all input fields start.
        • Right edge is where the area for input fields ends: 42 px from right border.
      • Change the padding of that box so that it appears to be less high:
        • Use 6px above and below.
        • Increase left and right padding to 12px.
      • Move the arrow of the message box closer to the field it points to. The div also has a 5px top padding: remove that.
        • The arrow should be at 100px from left edge of message box for smaller, half-width input fields.
        • The arrow should be horizontally centered for large, full-width input fields.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              weder Andreas Weder
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated: