CssLayout side by side components wrap ?

General
1

Hello

I’m trying create a CssLayout to align my components in wrap but does not work. I want organize my components side by side.

I’m trying this.



/** my class */
public class Person extends Window{
    
    public Person(){
        super("Person");
        center();
        setModal(true);
        setClosable(false);
        setDraggable(false);
        setResizable(false);        
        setSizeUndefined();        
        
        initComponents();        
        initLayout();        
        setWidthComponents();
    }

    /** begin components */
    void initComponents(){
        cssLayout = new CssLayout();        
        nome = new TextField("Name");        
        email = new TextField("Email");
        dataNasc = new PopupDateField("Born");
        fone = new TextField("Fone");
        celphone = new TextField("Celphone");
    }

    /** begin layout */
    void initLayout(){
        //layout
        cssLayout.setStyleName("styles");
                
        //textfields
        name.setRequired(true);
        email.setRequired(true);        
        
        // date field
        born.setRequired(true);
        born.setLocale(new Locale("pt","BR"));    
        born.setDateFormat("dd/MM/yyyy");        
        
        //add componentes
        cssLayout.addComponent(name);
        cssLayout.addComponent(email);
        cssLayout.addComponent(born);
        cssLayout.addComponent(fone);
        cssLayout.addComponent(celphone);
        setContent(cssLayout);        
    }

    /** set width componentes */
    private void setWidthComponents(){
        name.setWidth("500px");
        email.setWidth("500px");
        born.setWidth("100px");         
        fone.setWidth("100px");
        celphone.setWidth("100px");    
    }

    /** attributes */
    private CssLayout cssLayout;
    private TextField name;
    private TextField email;
    private PopupDateField born;
    private TextField fone;
    private TextField celphone;

}


/** styles.scss */
.v-csslayout {     
     display: inline-block;
     padding:8px;
     float:left;
  }

How to do this ?

thanks

2

Hi Fernando,

You have set the “display: inline-block” to the layout itself. I think you meant to set it for the elements inside the layout.

Try this:

.v-csslayout div {    
     display: inline-block;
}
3

thanks for your attention, now works ! :smiley: