TextField captions on left of field in GridLayout

Vaadin 6 / 7 / 8
1

I have a requirement to display captions to the left of each TextField.

I have achieved this on a GridLayout as follows:

Java:

TextField field = new TextField("My Caption"); field.addStyleName("caption-left-of-field"); CSS:

.v-caption-caption-left-of-field {
    position: relative !important;
}

.v-gridlayout-caption-left-of-field {
    white-space: nowrap;
}

This half works. The caption is shown to the left of the field but I now have white space between each line in the GridLayout. This is because the “v-gridlayout-slot” divs have their “top” property in their style attribute set to an absolute position and this absolute position is calculated as if the TextField was showing its caption ABOVE it instead of to the LEFT of it. I need some way of correcing the value of the “top” property. I don’t think that disabling absolute positioning in CSS is an option because the GridLayout needs this to position fields. Any help is much appreciated.