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.
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.