Caption and height Checkbox

Hello,

i want to create a form, but the checkbox height is to small, because the caption is shown right. So the whole form (right) is to small. Is there a simple possibilty so set the checkbox height same to the other components (textfield,combobox etc.)…

Thanks
Dennis
17517.png

Hi!

I think you have two options, one would be using the
GridLayout
to lay out components in both columns, and the other would be cheating a little bit with additional “spacer” Label

If you’d like to go the second way, here’s a bit of code:

[code]
package org.vaadin.tori.formandalignment;

import java.util.Arrays;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.PopupDateField;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme(“form-and-alignment”)
@SuppressWarnings(“serial”)
public class MyVaadinUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class)
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    final HorizontalLayout twoColumns = new HorizontalLayout();
    twoColumns.setWidth("100%");
    twoColumns.setMargin(true);
    twoColumns.setSpacing(true);
    setContent(twoColumns);

    // first column
    VerticalLayout primary = new VerticalLayout();

    TextField firstName = buildTF("First name");
    TextField lastName = buildTF("Last name");
    TextField email = buildTF("email");
    PopupDateField birthDate = buildPDF("Date of Birth");
    ComboBox gender = buildCB("Gender", "Male", "Female");
    gender.setWidth("100%");

    
    primary.setCaption("Primary");
    primary.addComponents(firstName, lastName, email, birthDate, gender);

    twoColumns.addComponent(primary);

    // second column
    VerticalLayout secondary = new VerticalLayout();
    secondary.setCaption("Secondary");

    TextField weight = buildTF("Weight");
    TextField height = buildTF("Height");
    CheckBox active = new CheckBox("Active");
    Label spacer = new Label("");
    spacer.setHeight("62px");
    HorizontalLayout checkbox = new HorizontalLayout();
    checkbox.addComponents(active, spacer);
    
    PopupDateField registration = buildPDF("Time of registration");
    ComboBox nationality = buildCB("Nationality", "German", "American",
            "Finnish", "Polish");

    secondary.addComponents(weight, height, checkbox, registration,
            nationality);

// setup the checkbox
// active.setHeight(“62px”);
checkbox.setComponentAlignment(active, Alignment.MIDDLE_LEFT);

    twoColumns.addComponent(secondary);
}

private ComboBox buildCB(String caption, String... options) {
    ComboBox cb = new ComboBox(caption, Arrays.asList(options));
    cb.setWidth("100%");
    return cb;
}

private PopupDateField buildPDF(String caption) {
    PopupDateField pdf = new PopupDateField(caption);
    pdf.setWidth("100%");
    return pdf;
}

private TextField buildTF(String caption) {
    TextField tf = new TextField(caption);
    tf.setWidth("100%");
    return tf;
}

}
[/code]I add my checkbox to a HorizontalLayout that also contains an empty Label, that has its height set to match the height of the row. Then I add this HorizontalLayout to VerticalLayout in place of bare CheckBox.

Hope that helps you :slight_smile: