vaadin 14 HorizontalLayout and VerticalLayout caption

I want to add layout setcaption how to add any idea…:grinning:

Just add a child component with textual content as a first child.

There are many to choose from, say H1, H2, H3, … or Div, or Span may be appropriate.

give me some example code sir…

i need this type
image.png

layout caption is search by and border and the other component…

i will try this code but it is not working

public void setCaption(String name)
{
VerticalLayout vlay =new VerticalLayout();
Span captionElem = new Span(name);
add(captionElem, vlay);
getStyle().set(“border”, “1px solid black”);
getStyle().set(“border-radius”, “5px”);
getStyle().set(“padding”, “0px”);
}

:rofl:

You could turn that into a component and use it to compose the layout. Something like:

class CaptionLayout extends VerticalLayout {
  CaptionLayout(String caption, Component content) {
    add(new Span(caption), content);
    getStyle().set("border",  "1px solid black"); // or in a CSS file
    getStyle().set("border-radius",  "5px");
    getStyle().set("padding",  "0px");
  }
}

Then use it to compose that layout:

var fieldValueLayout = new HorizontalLayout(
  new TextField("Name"),
  new TextField("Value"),
  new Button("Search")
);
add(new CaptionLayout("Search By", fieldValueLayout));