CustomComponent with Label and Field error indicator problem

Hello,

I try to build a form that consists of some fields vertical (I use vertical layout instead of form layout) and some fields that are horizontal in a row.
I want the caption left besides the field like in the formlayout.
On my way to acchieve this I tried to approaches with different Problems.

  1. I used FormLayout added my fields an sometimes a HorizontalLayout with may fields rows.Then of course the label appeared in top and the row startet not at the very left,but under a vertical field. Sound clear for me, but I had no idea how to change it and I think it’s the wrong approach.
    2 Then I changed FormLayout to VerticalLayout and wrote a little customcomponent like this:

public class AutoFormField extends CustomComponent {

	private static final long serialVersionUID = -6403780787824841366L;

	public AutoFormField(Field field) {
		HorizontalLayout layout = new HorizontalLayout();
		layout.setSpacing(true);
		setCompositionRoot(layout);

		Label label = new Label(field.getCaption());
		field.setCaption(null);
		label.setPrimaryStyleName("v-caption");
		label.setContentMode(ContentMode.HTML); // let's make it support HMTL
		layout.addComponent(label);
		layout.addComponent(field);
	}

}

I attached a screenshot of that region.
Well, this works so far up to the point where validation errors raises. Then a “new” or better the original captions appears right to my fields and shreds my layout :frowning:
I tried it also with CSSLayout, I found some hints by Marko in an old thread some years ago, but layout also breaks.

I use vaadin 7.0.1.

Any hints are very welcome.

Thanks in advance

Marcus
12849.png

Hello,

I helped myself with putting a FormLayout around the fields, that are in a row. It works, looks quite pretty.
But I feel that this is not the best solutions.

Or is it a usable way?

Regards

Marcus

I have found a solution with css.
I saw that many people looked for an answer, so I post it here:

Create a custom component like this for label and field:


public class AutoFormField extends CustomComponent {

	private static final long serialVersionUID = -6403780787824841366L;

	public AutoFormField(Field  field) {
		CustomLayout layout = new CustomLayout("autofieldlayout");
		layout.setPrimaryStyleName("v-autoFieldLayout");
		layout.setSizeUndefined();
		setCompositionRoot(layout);
		Label label = new Label(field.getCaption());
		field.setCaption(null);
		label.setStyleName("autoFormCaption");
		label.setContentMode(ContentMode.HTML); 
		label.setSizeUndefined();
		layout.addComponent(label,"caption");
		layout.addComponent(field,"field");
	}

}

Add these fields in a component you want.I extended panel with VerticalLayout that can contain HorizontalLayout if oyu like section.
I added a style named “setStyleName(“v-autoform”);”

Now use a css like this:


.v-panel-captionwrap {
	border: groove 1px;
}

.div-autoform-field {	
	width: 330px;
}

.div-autoform-field .v-captionwrapper {
	position: relative;
}

.div-autoform-field .v-captionwrapper .v-caption {
	position: relative;
	float: left;
	width: 15px;
}

.div-autoform-field .v-widget {
	position: relative;	
	left: 30px;
}
.div-autoform-field .v-captionwrapper .v-widget {
	position: relative;	
	left: 15px;
}

.v-panel-content-v-autoform {
}

I hope, I grepped all styles from my css you need.

Maybe someone likes it.