[MGNLUI-2507] Use proper styling for section labels that are not in a plain Vaadin FormLayout Created: 09/Dec/13  Updated: 11/Dec/13  Resolved: 10/Dec/13

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: 5.2
Fix Version/s: 5.2.1

Type: Bug Priority: Neutral
Reporter: Jaroslav Simak Assignee: Mikaël Geljić
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File backup-styles.png     PNG File labels.png    
Issue Links:
dependency
is depended upon by MGNLBACKUP-74 Fix issues found in acceptance 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:

 Description   

Labels in smallapps are not properly formatted when using csslayout.

See attached screenshot.



 Comments   
Comment by Mikaël Geljić [ 09/Dec/13 ]

To add a bit more context, there are two different options for building forms:

  • with plain Vaadin components, with e.g. a FormLayout. This is what is used in About app and allows to insert section title labels anywhere while keeping correct alignment, but has no data-binding option out of the box, and Vaadin's FieldGroup cannot be used to populate Labels with a property datasource.
  • with a form definition and the FormBuilder. This creates the form fields based on configuration and binds it correctly to the item, but has very limited layout options (intensive use of custom Vaadin components from the Vaadin 6.x days), hence one cannot simply add a section label anywhere.

So as to work around these current limitations and to ensure minimal consistency, we want to allow section title labels to be appended right inside the smallapp-section's CssLayout, and position them accordingly when this is the case.

As a side-note, we may also hide the form's tabbed navigation in small apps when there's only one tab defined, to avoid wasting space.

Comment by Mikaël Geljić [ 10/Dec/13 ]

Attached resulting styled UI for backup app

Generated at Mon Feb 12 08:57:20 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.