[Resolved] Don’t display entire Layouts row if empty

[Author]

Posts

[andyM-7]

Tell us what you are trying to do? I am trying to hide a row if it is empty. I know how to conditionally check if a field is empty, however this only applies to the actual contents of the row. I have a row that has a full-width background set, which looks great when the row is filled, however when the row is empty, the background still appears. I was wondering if there was a way to hide an entire row, rather than just a field when it is empty.

Is there any documentation that you are following? I was following the conditional output documentation as well as the one for checking for non-empty fields. However, this only seems to apply to fields, rather than entire rows.

Is there a similar example that we can see? Screenshots attached.

What is the link to your site? hidden link at the bottom the yellow testimonial row is empty on this page, but being used here: hidden link

[Nigel]

Hi Andy

We have a feature request to add conditional display of rows and cells in Layouts, but it is not currently possible.

However, as a workaround, you should note that if you add a Visual Editor cell and include a conditional shortcode then you can include any valid HTML inside the condition which will or will-not be printed in the final page depending on the condition.

So you could include a style tag with a simple CSS rule to hide the row in question (you may need to add an ID or class to it to use as your CSS selector) inside your conditional shortcode.

[andyM-7]

Hi Nigel,

Not sure I entirely understand the workaround. Let's say the yellow full-width row has the id 'custom-layout-testimonial'
I then have a conditional shortcode in a cell within that row that displays a testimonial if the field is not empty.
I'm now not sure how I can get the parent row to be hidden within that conditional shortcode.

[Nigel]

I had in mind something like this:

[wpv-conditional if="some condition"]
<style type="text/css">
#custom-layout-testimonial {
  display: none;
}
</style>
[/wpv-conditional]

The style to hide the row will only get added to the page if your condition is met.

There is only one drawback I'm aware of, namely validation. I don't think styles in the body are strictly valid, although that is due to change (you can Google that to clarify if it is a concern).