[MGNLUI-3568] No or wrong bottom padding in dialogs Created: 09/Sep/15  Updated: 09/Feb/17  Resolved: 29/Jun/16

Status: Closed
Project: Magnolia UI
Component/s: design, dialogs, forms
Affects Version/s: 5.4.1, 5.4.2
Fix Version/s: 5.4.8, 5.5

Type: Bug Priority: Neutral
Reporter: Andreas Weder Assignee: Hieu Nguyen Duc
Resolution: Fixed Votes: 0
Labels: next, quickwin, ux, visual-design
Remaining Estimate: 0d
Time Spent: 4d 3.75h
Original Estimate: 3d

Attachments: PNG File 40px.png     PNG File No bottom padding.png    
Issue Links:
Cloners
is cloned by MGNLUI-3935 CLONE - Tune padding below certain fi... Closed
duplicate
duplicates MGNLUI-2804 Fix paddings in the bottom area of a ... Closed
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:
Sprint: Saigon 51
Story Points: 3

 Description   

The padding between the last field and the bottom edge of the form should be 40px.

There's currently no or not enough bottom padding after the last form field in a dialog. As a result, dialogs look unbalanced.

After fix:

  • The padding between the last field and the bottom edge of the form is 40px
  • The fix just applies for strong dialogs
  • It remains 40px also when an error and/or help text appears


 Comments   
Comment by Mikaël Geljić [ 15/Apr/16 ]

Closed MGNLUI-2804 as duplicate (though it was here for a longer time). It was already attempted, but I'll quote the reason it was reverted & reopened here:

Reverted temporarily due to height calculation + scrollbar issues for "plain" dialogs.

Comment by Mikaël Geljić [ 20/Jun/16 ]

The ElementResizeListener for dynamic dialog height is in the following class: info.magnolia.ui.vaadin.gwt.client.dialog.connector.DialogContainingFormConnector
In particular, the method #doResize is doing the calculation. Mind that this is GWT code, on the client side, i.e. it needs to be recompiled when changed (setup GWT SuperDevMode)

Comment by Hieu Nguyen Duc [ 27/Jun/16 ]

mgeljic Do we just fix "the padding between the last field and the bottom edge of the form" or also fix "the top and the bottom padding of the "dialog-footer" to 7px each" (in the closed ticket). I'm not sure because this ticket just mentions the first one.

Comment by Andreas Weder [ 27/Jun/16 ]

hieu.nguyen This issue is mostly about the padding between the last field and bottom edge of the dialog.

If you find that that the dialog footer (which contains the buttons) is off as well, I suggest you either re-open that closed ticket or create a follow-up ticket that describes the issue. It's probably best to keep the two things separate. Thanks!

Comment by Mikaël Geljić [ 27/Jun/16 ]

Thx guys for your patience while this was pending for review on my side.
You know, at first it looked almost too simple, considering how fragile those form dialogs/subapps usually are (scroller, max size, "shrinking" behavior, real dialogs ✕ detail subapps...).
I'm a pixel maniac too—which means well done when I have nothing to say.

It seems there is currently a bottom-offset problem with detail subapps too, but not related to this change (I just filed MGNLUI-3926).

Comment by Hieu Nguyen Duc [ 01/Jul/16 ]

QA failed because the bottom padding is just 36px.
I'm sorry because I didn't foresee that it's merged together with MGNLUI-3871.

In fact, there would be still some issues if we resolved the above problem:

  • Go to Security app / Groups tab / New Group, the scrolling issue MGNLUI-3687 occurs, click outside dialog, the padding becomes 55px, focus input, it becomes 40px.
  • Go to Security app / Groups tab / Groups tab, the twin-column component has line-height: 1.4 that plus 1px to padding, it becomes 41px.
  • In case combobox is the last field, because it has a 29px height boundary and the actual input inside is just 24px height, the padding between the last field and the bottom edge of the form becomes 40 + (29 - 24) = 45px
  • If the last field is text, there's not enough 40px because text doesn't have a boundary.

I think the scrolling issue MGNLUI-3687 should be fixed before we continue this.

Generated at Mon Feb 12 09:07:55 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.