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).
.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.