Add style to FormLayout rows (tr)

Hi! Is there a way to add styles to a FormLayout row? I know I can add styles to the component in the row, but this class name is not propagated to the row holding the component.

Example of output that I would want. I would like to get the class “row-amount” in addition to what I am already getting (amount v-textfield-amount)

<tr class="v-formlayout-row row-amount">
  <td class="v-formlayout-captioncell">...</td>
  <td class="v-formlayout-errorcell">...</td>
  <td class="v-formlayout-contentcell">
    <input id="gwt-uid-47" class="v-textfield v-widget v-textfield-error align-right v-textfield-align-right amount v-textfield-amount" type="text" aria-labelledby="gwt-uid-46" aria-invalid="true" tabindex="0">
  </td>
</tr>

Unfortunately there isn’t. You could create an enhancement ticket about it, but I suspect it would be included in the next minor update (v 7.7.0) as it changes behaviour and might break some themes. Also, 7.7 doesn’t have any sort of schedule yet so don’t know when it would be available.

You could try to simulate the FormLayout with e.g. a GridLayout. IIRC those cells do get the style names, but you would have to add your own Labels as captions.

Thank you for the help!
See if I create an enhancement ticket for it, I think it wouldn’t be difficult to implement and very useful for styling :slight_smile:

I agree, it would be very useful. You can add the ticket at
http://dev.vaadin.com
. Thanks for the contribution! :slight_smile:

I have added the ticket: https://dev.vaadin.com/ticket/20155#ticket

Yes!

This would be very helpful.

.v-formlayout-row is just a dead duck in the water.