having a common label spacing between two FieldGroup components

Support
#1

I have two FieldGroups in one of my screens. In desktop it is displayed side by side and looks nice but when I display it in smaller screen the 2nd fieldGroup components moves below the first fieldGroup automatically which also very nice. But it doesn’t look nice as both field groups take different label space before the fields as attached.

Questions:

  1. Is there any way we can align the fields of two or more fieldGroups with the same label length?
  2. The components do not resize if I make the screen small, if I have to use css, will this work if I use the css component that is available in studio?

Snip20160908_8

Snip20160908_9

1 Like
#2

I found an option in version 6.3.0RC1 : FieldCaptionWidth in the CUBA Studio that worked well.

#3

Hi,
Property fieldCaptionWidth was introduced in version 5.2, so you can use it in 5.2 version and later.

Please note that fieldCaptionWidth supports only fixed value in pixels and any long caption that exceeds fieldCaptionWidth will be cropped.

#4

Thanks.

Is there anything similar in plan that will work in responsive UI?

#5

We do not currently have plans to implement responsive FieldGroup, but you can implement responsive layouts using CssLayout container, described here: CssLayout - CUBA Platform. Developer’s Manual.

#6

Hi,

i’ve exactly the same problem. Would it be also possible to combine two fieldGroups so that they “synchronise” the max caption length between each other (just like within one field group it is done to get a cohesive look between the different fields)?

A simplyfied example would be


<fieldGroup id="firstFieldGroup">
  <field id="attributeWithLongName" />
  <field id="attrWShortName" />
</fieldGroup>
<fieldGroup id="secondFieldGroup" synchronizeWith="firstFieldGroup">
  <field id="attributeWithVeryVeryVeryLongName" />
</fieldGroup>

In this case the caption width would be for all three just like the size for the “attributeWithVeryVeryVeryLongName” field.

This would be a nicer way around the fact as to set just 200px via fieldCaptionWidth.
Possibly fieldCaptionWidth would even take optional an id of another fieldGroup instead of fixed witdh…

What do you think?

#7

Hi, it is good idea, but now we are limited with Vaadin layout model, there is no way to perform layout for component depending on another component if it is not a parent-child pair.

We will try to find approach to do such a layout processing but I am not sure that it is possible.