Label caption on left rather on top?

Is there a way to make the label caption be to the left (same row) as the label value itself?

Because there’s no “surrounding div” that contains both the caption and the label, I can’t just turn the ‘div’ to display:inline so it doesn’t operate like a block, not to mention the float:left’s put in.

<div class="v-caption v-caption-lastServerCommunicationsInfo" style="width: 454px; margin-left: 0px;">
  <div class="v-captiontext">Last sent to server: </div>
  <div style="overflow: hidden; clear: both; width: 0pt; height: 0pt;"></div>
<div style="float: left; margin-left: 0px;">
  <div class="v-label v-label-lastServerCommunicationsInfo lastServerCommunicationsInfo" style="width: 4409px;">03:46:10 UTC</div>

I’d just like it to read:

Last sent to server: 03:46:10 UTC

instead of:

Last sent to server:
03:46:10 UTC

Thanks for any tips…


You’ll want to use layouts for that - the layout usually handles the caption placement in Vaadin: the FormLayout places the caption to the left of the component, or you could use a separate label for your caption and position that anyway you like, using whatever layout (you might like CssLayout if you’re used to CSS).

Best Regards,

I strongly recommend using FormLayout, which is exactly for this purpose.

You can do it in CSS for some other layouts as well. I’m not sure about VerticalLayout, but at least:



in CustomLayout
(might be very similar in VerticalLayout)

in CssLayout
though in this case components are placed horizontally and can wrap also between caption and the component

[/list]As it’s difficult to align the captions properly and there can occur wrapping between the caption and the component, these CSS solutions are not so good.

Thanks. I found that FormLayout, while it worked, to be overly heavy for just putting out a essentially two fields, one fixed (label) and the other data that changes but is basically read-only.

I’ve gone with a HorizontalLayout with two labels.

FormLayout ended up creating

with an extra
for possible error indicators. I really just want something simple that renders like:

Label:Value here

Then I could control the combination div, including white-space: nowrap if breaking is not wanted, align it, etc., and also style the label and values independently as desired, like if I wanted to put more space between them or have one bold, or put the value below the label, etc.

Anyway, I’ll take a look at CssLayout, which seems like it could be lightweight and flexible.

I may also just use HorDashLayout from the directory since it seems to be very lightweight, though I prefer to use standard features as the feeling is they will be better supported.

Is there any option other than using FormLayout? For example what if you want two columns of data in your forms. For example firstname and lastname, start date and end date, and so on…

Use a VerticalLayout for example and add the following css style:

.v-caption {
display: inline-block;