how to controll the placement of the caption of a field?

General
1

Hi everyone :slight_smile:

All I want is very simple :slight_smile:

I would like to controlll wether the caption of the field is shown before or after or above the field

I have red in book of vaadin that the placement of these caption is controlled by the layout in general

But is there a way to conroll it manually ? (independent of the layout)

Or there is only the hard way ( create a horizontal or vertical layout and than add the field to it just to properly adjust the placement of its caption)?

2

No, it’s not possible to control the captions independently of the layouts. You can use CSS to do some manipulation of the captions.

Not sure what your use case is, but if you’re putting fields in a Form, you can change the layout of the form with [tt]
setLayout()
[/tt]. It’s FormLayout by default, with captions of the fields. You can also override the [tt]
attachField()
[/tt] method in Form to control manually how the fields are added to the layout and could even inject additional components there.

The CssLayout allows a bit better (or at least different) control over the captions than the other layouts. See
an example
. It’s easy to control whether the caption is above or left of the component, but using “[tt]
direction: rtl
[/tt]” to get it right of the component is not really a nice solution for more than one component inside the layout, as it reverses all the div elements and thereby all the components.

You can also use CustomLayout with Form.

3

Thank you for the detailed answer :slight_smile:

For my usecase just imagine three fields in a row, where each field’s caption is placed on the left (or before )each other

And there are some fields underneath each other as well :slight_smile:

Of course each fields has its caption on the left of the field :slight_smile:

Unfortunately I couldn t copy and paste an exact image of the layout, but I hope you can imagine this :slight_smile:

4

Hi. I also have this problem.

I need to use Grid Layout for proper field placement and column spanning but fields are added with it’s caption on top.
As I will be building complex forms with a great number of fields, left sided captions will allow me to save space.

Here is a very simple sample of a form with a standard Grid Layout:

And here is the same sample as I would like it to be:

To produce this sample I’ve overrided the addComponent method from the GridLayout, setted the field component’s caption to null and wrapped it a 2 column gridLayout with a fix sized label with the original caption text to the left and the original component to the right.

This is not the proper way to do this but it allowed me to build the sample.
It would be nice to have a way to switch a field caption and required/erro icons location as it takes much less screen space.

Is this doable ?

5

I dont have the solution but i want to point out that i have the same issues.

It would be nice if there would be some kind of CustomLayout feature that is not only capable of placing the components via DIV names in the layout but also the component captions seperately. Something like this:

...

Hardcoding is not an option because i need i18n features.

Of course even better would be the programatical approach via GridLayout but i dont have a clue how to do that because placing a independent Label in front of the TextField is something i dont want because i want the required Field indicator to be used and i also want to use the setCaption Feature.

IMO this whole form thing needs improvement at least when it comes to Labels before the Component as this is default in all business apps. FormLayout is not feasible because with that you simply cant create complex forms.

Marc
6

The quick and dirty way of doing something like this is to split the field into two different component, one field without a caption and a label with the caption. This way you can put the caption where ever you want. Maybe not the neatest solution but it gives you all the control.

7

As i said. This is some kind of workaround. Besides that you need to disable the v-caption div (display:none) otherwise you get the indicator without caption on top of the TextField.

All in all thats pretty much work for something that should be better handled by the framework. Of course you can do the label and indicator stuff all for yourself but at some point you are wondering what the benefit of Vaadin is :wink: I mean, using customLayout and do all the stuff manually is like simply using jQuery and code the HTML/JS stuff yourself.

Dont get me wrong. I like Vaadin but coding a lot of stuff to achieve basic things makes Vaadin look too complex to do simple things. And nobody wants this. Vaadin is THE framework for doing RIA based business apps and therefore it needs to shine on those business areas (complex forms is one of them).

Marc

8

I too agree with you Marc Logemann, framework means it should reduce risks atleast at low level … :rolleyes:

9

This is a really old post. I don’t know if the forums will allow my comment or not.

In all fairness, any API is going to make you work. Vaadin provides a wealth of capability at no cost, maintains an active and supportive forum, and the framework is stable. Take all of that away and the least of your problems will be figuring out how to align your form content =)