[Resolved] Hide Row if empty

[Author]

Posts

[SimonB1420]

Hi,

Is this feature request working yet?

https://toolset.com/forums/topic/dont-display-entire-row-if-empty/

[Waqar]

Hi Simon,

Thank you for contacting us and I'd be happy to assist.

A built-in feature for conditional display of rows and cells in Layouts is not available yet, but you're welcome to add your voice for this feature through our feature request form:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Meanwhile, you can use the workaround suggested by Nigel in the other thread, that involves hiding the empty row(s), through custom CSS code.

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[SimonB1420]

Hi

Need help on the previous suggestion from Nigel please as not sure how to implement this.

Maybe you can help using the /dev location? You should have a login to the dev location already.

Otherwise, what would be the best way to explain the functionality of this perhaps?

Thanks
Simon

[Waqar]

Hi Simon,

I can help you better understand the Nigel's suggestion, but for that, I'll need to see the exact row that needs to be hidden.

Can you please share temporary admin login details of the website, along with the information about the target row?

Note: Your next reply will be private and though no changes will be made on your website, please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Hi Simon,

Thank you for sharing the admin access.

To avoid the display of a thin white line, when no up-sell product is available, you can adjust your custom CSS code.

I noticed your website includes the following CSS code block, for showing this up-sell block row:

#prodback {
    background-color: white!important;
    Padding-top: 0px;
    margin-top: 20px;
}

Instead of targeting the outer row container for styling, you can target its inner content, so that it only shows when there is some product to show:

#prodback .up-sells.upsells.products {
    background-color: white!important;
    padding: 1px 15px 0px;
    margin: 20px -15px 0px;
}

I hope this helps and to check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

regards,
Waqar