From section with divider

Flow
1

Could you please advice how to add from section with header and horizontal divider followed up on the same line?

2

something like this ?

3

image.png

4

or something like this?
image.png

5

and are you using a FormLayout to layout that form?

6

I use HTML

in my case. Can you ping here what you’ve used and how ?

7

I use <hr> too, wrapped in a HorizontalLayout together with a <h3>. I have a small class for those section headers:

        public FormSectionHeader(String title) {
            H3 sectionTitle = new H3(title);
            sectionTitle.setWhiteSpace(WhiteSpace.NOWRAP);
            Hr line = new Hr();
            line.setWidthFull();
            add(sectionTitle, line);
            setAlignSelf(Alignment.CENTER, line);
        }

The same thing could be achieved with a more lightweight structure through CSS, but this solution is pure Java.

8

Then I set colspan to 2 on the section headers to make them full width (assuming a 2-col formlayout):

        FormLayout form = new FormLayout();
        form.setWidthFull();

        form.add(new FormSectionHeader("Section one"), 2);
        TextField tf1 = new TextField("Field 1");
        TextField tf2 = new TextField("Field 2");
        form.add(tf1, tf2);

        form.add(new FormSectionHeader("Section two"), 2);
        TextField tf3 = new TextField("Field 3");
        TextField tf4 = new TextField("Field 4");
        form.add(tf3, tf4);
9

There is a class Divider in Business App which can also be used easily

10

@nice-camel Could you please provide me with the link to that class?