CustomLayout Caption/Label Lineup

I am using CustomLayout and I am having problem lining up Labels with fields.
The Labels line up differently with fields which are required fields compared to none required fields.
How can I make the Labels to line up in the middle of the field regardless if the field is a required field or not? And how can I make the fields to space vertically equal amount regardless if the fields are required or not?

here’s a screen print - if you look at the required fields the labels are at the top of the field and if you look at the none required fields the labels are at the middle of the field:

Thank you

Peter

Why not try using a formlayout?

Hi Peter,

for a custom layout, you’ll have either to use html tables for positioning labels (as external labels) and fields oruse div’s and css tweaks like any div’s based html page

FormLayout does not allow you to have multiple fields on one line

That’s what I am doing; using tables with divs, but vaadin is positioning the labels and required markers and I don’t know how to change that.

Hi,

This depends a little on how your layout is set up, but it sounds like this should work:

Make the
.v-caption
element of your required fields (or all fields in the layout, since you’re not using captions)
float:right;

Best Regards,
Marc

You can put captions as a plain html text in your layout file, as another opportunity. We often do the same way to give more room for customers to tweak the interface.

Thank you for your help, but
.v-caption

float:right;
moves the field to the left side, it has no effect on up or down, and the required fields are bing pushed down buy the required field indicator and that is causing the labels to be not aligned with the fields and other not required fields.

Peter

That’s what I am doing and the required field indicators causing the fields to be mis-aligned.

Thank You

Peter

Did you actually try? Because I did, and it worked perfectly in my test application.

I must have misunderstood your layout structure if it does not work for you.

Best Regards,
Marc

Yes I have tried it, the Status field is shifted to the left and the field is still shifted down. I’ve added color: blue just to make sure it’s using the correct tag.

Sorry, I’m not following here - how come “Status:” is affected by the CSS that should only affect the element where the required indicator is? Are you sure you’re applying the CSS to the right element?

(It would perhaps be easier to say something specific if you posted the CustomLayout.)

Best Regards,
Marc

Sorry, I’m not following here - how come “Status:” is affected by the CSS that should only affect the element where the required indicator is? Are you sure you’re applying the CSS to the right element?

(It would perhaps be easier to say something specific if you posted the CustomLayout.)

Best Regards,
Marc
[/quote]

Here are the CustomLayout.html file and CSS file.
11336.css (550 Bytes)
11337.html (3.55 KB)

It styles.css you have this:

.v-caption
{
    display:float:right;
}

but you should have this:

.v-caption
{
    float:right;
}

Also (if I remember correctly) you don’t need these:

.v-caption div
.v-caption .v-captiontext
.v-caption .v-required-field-incidator
.v-required-field-indicator

Hope that helps.

//Marc

Not completely true: you can add additional layouts inside FormLayout, e.g. place a HorizontalLayout with multiple fields inside the FormLayout and you have multiple fields on one line.

The downside is that you’ll have to handle the field mapping then yourself, of use the CustomField add-on.

Thank you for your help, but that did not fix the problem

if I have “float:right” the required asterisk appears on the right side of the field and still pushes the field down so it looks like the field is taking up 2 rows which makes the custom field label not centered.

Actually it did fix the problem, I had another table inside the table and that was throwing off the asterisk, I will have to find a different way to display multiple fields on one line and have the required mark show up without expanding the rows.

Thanks Marc for your help.