Design

Hi. please help me to design the sample in the attached screenshot. The text fields in the box and alignment is not a problem i designed it. But what component should be used for the outer box (the border with “Information” text)
13343.bmp (2.29 MB)

Take a layout and do some css vodoo with paddings, margins and border.

If you want a fieldset you have to take the deprecated Form element.

http://dev.vaadin.com/ticket/12935

Hi Sascha,

Could you please post some sample css code for this.

Thanks for your reply.

For a fieldset you may take a CustomLayout:

  • Add a file
    fieldsetlayout.html
    to your
    VAADIN/themes//layouts
    directory, where

    is a placeholder for your theme name, with the following content:







  • Add a class
    FieldSet
    to your application with thew following content:


    import com.vaadin.ui.Component;
    import com.vaadin.ui.CustomLayout;

    public class FieldSet extends CustomLayout {
    private static final long serialVersionUID = -1185840545124496947L;

    public FieldSet() {
    super(“fieldsetlayout”);
    }
    public void addLegend(Component c) {
    super.addComponent(c, “fieldset-legend”);
    }
    public void addContent(Component c) {
    super.addComponent(c, “fieldset-content”);
    }
    }

  • Use the class
    FieldSet
    within your layout. For example:


    VerticalLayout layout = new VerticalLayout();

    Panel panel = new Panel();
    FieldSet fieldset = new FieldSet();
    fieldset.addLegend(new Label(“My Legend”);
    fieldset.addContent(panel);
    layout.addComponent(fieldset);


  • Optionally style the fieldset in the theme, for example:


    $border-radius: 10px;

    .v-fieldset {
    border-radius: $border-radius;

    .v-fieldset-legend {
    font-weight: bold;
    }

    .v-fieldset-content {
    }
    }


Yeah. I have already used the html fieldset. Thanks for the reply.