[magnolia-dev] [JIRA] (MGNLUI-2749) Change in-line help texts and validation messages to be less blocky

[JIRA (on behalf of Andreas Weder)]

Title: Message Title

Andreas Weder updated an issue   Magnolia UI / MGNLUI-2749 Change in-line help texts and validation messages to be less blocky Change By: Andreas Weder In forms, the *in-line help and validation messages currently look too blocky*. They extend to the full width of the dialog, but were actually designed to be  *  only as wide as the right part of the form ,  covered by the input fields * . Also, the inline message are  *  too high and their paddings are too large * . As one result of this, *error and warning messages look way too alarming*. Please make sure they look as designed, which means: h4. Fields * Must have a 2px red (error) or yellow (warning) border * Error or warning signs should be inside an input field and right-aligned.   **  Please verify how feasible this is to achieve.  If that's not possible (e.g. check boxes), show it next to the field with a 8px padding. h4. 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 padding to make the box to appear less high: ** Use 6px above and below. ** Increase left and right padding to 12px. * The arrow of a message box must be closer to the field it points to. The div currently containing it has a 5px top padding: remove that. ** The arrow should be horizontally centered for large, full-width input fields. ** The arrow should be at 100px from left edge of message box for smaller, half-width input fields. h4. The message banner at the top * Set font-size to 12 px. * Set text color of "Jump to next error" link button to <75>, on hover to white. * Use less padding above and below: use 6px only. * Make sure that the message banner has a 2px margin at the top and at the bottom. Add Comment   This message was sent by Atlassian JIRA (v6.4.11#64026-sha1:78f6ec4) ---------------------------------------------------------------- For list details, see: http://www.magnolia-cms.com/community/mailing-lists.html Alternatively, use our forums: http://forum.magnolia-cms.com/ To unsubscribe, E-mail to: <dev-list-unsubscr...@magnolia-cms.com> ----------------------------------------------------------------