Skip Navigation

[Resolved] Conditional Display of Rows in Grid of Cells

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a Layout that uses a Grid of Cells to display multiple rows of content. If the content is empty, the row should not appear. As it is now, there is some vertical space where the row is displayed, even without content.

Solution: If you get rid of that empty p tag, the row and its cells have no height and the space collapses. So I can think of two options.

  • Apply custom CSS that hides all empty paragraph tags in these rows. Add something like this to your Layouts CSS
  • .row > div > p:empty {
        display: none;
    }
  • Try to suppress the empty paragraph tag by disabling automatic paragraph tags. There are different ways to do this depending on how your Layouts are defined. If the cell contents are created in a Visual Editor cell, you can select "Disable automatic paragraphs" in the Visual Editor cell as shown in the screenshot. If it's in a Content Template cell, you can edit that CT and choose "Manual paragraphs".
  • This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

    Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

    This topic contains 2 replies, has 2 voices.

    Last updated by jamesW-18 3 years, 8 months ago.

    Assigned support staff: Christian Cox.

    Author
    Posts
    #588844

    Tell us what you are trying to do? I have a grid of cells with numerous rows which are conditionally displayed. However, even if the content of a row is not displayed, the space the row takes up is displayed. I would like to not display an entire row of a grid under certain conditions and also not have the whitespace it takes up display as well.

    Is there any documentation that you are following? No.

    Is there a similar example that we can see? There are three featured products on this page: hidden link
    On this page there are four hidden link

    The page with three featured products "leaves room" for the fourth product even though there isn't one. I want the row not to display (take up space) when blank.

    What is the link to your site? Provided above.

    #588948

    Christian Cox
    Supporter

    Languages: English (English )

    Timezone: America/New_York (GMT-04:00)

    Screen Shot 2017-11-12 at 12.04.28 PM.png
    Screen Shot 2017-11-12 at 12.06.37 PM.png

    Hi, the only thing taking up space in these empty rows is an empty paragraph tag for each cell. Please see the attached screenshot for an example. If you get rid of that empty p tag, the row and its cells have no height and the space collapses. So I can think of two options:
    - Apply custom CSS that hides all empty paragraph tags in these rows. Add something like this to your Layouts CSS:

    .row > div > p:empty {
        display: none;
    }
    

    - Try to suppress the empty paragraph tag by disabling automatic paragraph tags. There are different ways to do this depending on how your Layouts are defined. If the cell contents are created in a Visual Editor cell, you can select "Disable automatic paragraphs" in the Visual Editor cell as shown in the screenshot. If it's in a Content Template cell, you can edit that CT and choose "Manual paragraphs".

    #589251

    The CSS you provided did the trick. Thank you for your excellent support. Top marks!