FormLayout hiding caption cell for a single component.

Hi all,

This is the first time I have to use CSS in a Vaadin app, I don’t really have any idea about CSS and I’m hoping someone can help.

I have a FormLayout that contains a ton of components, all aligned correctly as expected - one issue is that I need to be able to add a control in the middle of the form that should not have a caption, infact the captioncell should not be displayed at all (The component should take full-width).

I’ve tried the following:

myComponent.addStyleName ("form-item-no-caption");

Then in my theme:

.v-formlayout-captioncell .form-item-no-caption { display: none; } Needless to say it doesn’t work, I’ve had a look at Chrome’s Developer Tools and the stylename is physically added to the td containing the component, the captioncell is higher up in the html heirarchy, from what I could tell a parent selector in CSS would work, but that doesn’t exist - the only thing I found was an April Fools joke.

Has anyone had to do this before - maybe found a workaround, or a better solution?

Just an update, I’ve also tried to brute-force it using jQuery:

StringBuilder js = new StringBuilder (); js.append ("$(document).ready(function(){") .append ("$('.form-no-label').parent().closest('tr').find('.v-formlayout-captioncell').css('display','none');") .append ("$('.form-no-label').parent().closest('tr').find('.v-formlayout-errorcell').css('display','none');") .append ("});"); Page.getCurrent().getJavaScript().execute (js.toString ()); It removes it, but the entire form layout is thrown out (the rest of the items are no longer aligned correctly.

Ok, so I found a workaround, it’s pretty ugly I guess, but if anyone needs it, here is the jQuery I used:

$('.form-no-label').parent().closest('tr').find('.v-formlayout-captioncell').css('display','none');
$('.form-no-label').parent().closest('tr').find('.v-formlayout-errorcell').css('display','none');
$('.form-no-label').parent().closest('tr').find('.v-formlayout-contentcell').attr('colspan',3);

You could add a style to the parent container and then count which child element you want to style differently with

:nth-of type

pseudo selector. See http://www.w3schools.com/cssref/sel_nth-of-type.asp

Hello,

I am faced with exactly the same issue, I would like to avoid having the caption cell for certain components in the form layout.

Is there in the mean time easier (more elegant) way to achieve this than with jQuery?

I see that the Labels (for example with H2 style) get to be displayed without the caption cell…

@Burke Since I am not expirienced with css, could you be more detailed how the feature that you’ve mentioned can be used?

@Dylan How can I execute the jquery that you mention for every page so that I get to just add the no-label style wherever I want?

If your parent container has the class class=“my-parent-container” for example.

And let’s say you want to hide the caption only for the .v-formlayout-captioncell of the 5th field in the form.

You could do something like this:

.my-parent-container {
     .v-formlayout-row:nth-of-type(5) {
           .v-formlayout-captioncell {
                display:none;
           }
     }
}