CODEWITHSUNDEEP
javavaadinvaadin7
Stephane Grenier
Stephane Grenier

Reputation: 15927

Is there a way to get the captions in Vaadin to appear on the left side without using FormLayout?

Is there a way to get the captions in Vaadin to appear on the left side WITHOUT using FormLayout? I bolded it because I'm trying to avoid this being the first answer. I understand that FormLayout offers this ability but in some cases I need to use something like GridLayout to be able to have two columns of data (for example firstname and lastname, start date and end date, and so on).

Upvotes: 3

Views: 4830

Answers (2)

jsosnowski
jsosnowski

Reputation: 1590

If you use GridLayout, you could create additional column for captions and manage its appearance manually.

Vaadin Book says:

An alternative way to implement a caption is to use another component as the caption, typically a Label, a TextField, or a Panel. A Label, for example, allows highlighting a shortcut key with HTML markup or to bind the caption to a data source. The Panel provides an easy way to add both a caption and a border around a component.

This approach gives you more flexibility. Therefore, it is worth remembering.

Upvotes: 1

kukis
kukis

Reputation: 4634

There is no easy way to do it, because every layout generates appropriate space for components inside them. You can change easily order of caption and corresponding component inside "box" generated by a layout using simple CSS rules but its hard to dynamically determine the size of the box - thats what layouts do. I demonstrate it in the following image: enter image description here

As you can see, I was able to swap order of a caption and its textfield using this CSS:

#your-id .v-caption {
  position: relative !important;
  top: 10px !important;
}

#your-id .your-component {
  top: 0px !important;
  left: 0px !important;
  position: absolute !important;
}

and code

    GridLayout l = new GridLayout(2,2);
    l.addStyleName("your-id");
    for(int i=0; i<4; i++){
        TextField qq = new TextField();
        qq.setCaption("DuDuDu");
        qq.addStyleName("your-component");
        l.addComponent(qq);
    }

(I've applied these rules in Firefox CSS editor so only one slot has changed) This was possible only because I didin't have to change the size of v-gridlayout-slot . The size is dynamically generated by Vaadin and you can't tell Vaadin "generate me slot for my textfield and caption and I want caption on the left/right side".

Upvotes: 2

Related Questions