Search Results: Hide this web part if there's nothing to show: removes padding and margins

[Lou-i3]

Follow the template below or we will have to delete this request!!

Version used
Ex: 4.12.2

Describe the bug
On the PnP Search Result web part, when the "Hide this web part if there's nothing to show" parameter is enabled, the padding and margin of the web part are broken.
When this setting is enabled on the WebPart, inspecting the DOM reveals that the div with data-automation-id="CanvasControl" wrapping the results has an inline style set to: padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px;.

To Reproduce
Detailed steps to reproduce the behavior:

1. Add PnP Search Result web part to a page
2. Make sure there are results returned from the request
3. Enable "Hide this web part if there's nothing to show"
4. Publish the page

Expected behavior
The layout of the web part should be the same wether this parameter is on or off.

Screenshots
See screenshot, comparing with the setting off (left) and on (right):

Desktop (please complete the following information):

• Browser: Brave

Additional context
I tried with different requests and different templates but always get the same behaviour.

[kasperbolarsen]

Hi,
Which layout are you referring to, or is it the same for all layouts, also Adaptive Cards?

[Lou-i3]

Hi,
Yes it is the same for all layouts, even Adaptive Cards.

[wobba]

I suspect we need to add a check if a web part header is set - then don't remove padding. @Lou-i3 if there are no results, do you want the web part title to show or be hidden? And your screenshots says "10508 results", which means there are results?

Can you add some more detail into what scenario you have or not?

The idea is that if there are 0 results, don't render anything in the webpart and don't take up any padding space - similar to if the web part was not on the page at all. That is the intention of the setting.

[wobba]

@Lou-i3 if you have a web part title, and there is no content, then the web part title should also be hidden - would that be the correct fix?

[Lou-i3]

@wobba yes if there is no content, the web part should be completely hidden, title hidden too.

My screenshot showed a lot of results because I just made an example for the screenshot.
My scenario is that there aren't always documents from the query and if there are no documents, there shouldn't be anything displayed.

[jblueml]

@wobba I just checked this and figured out, what behaviour @Lou-i3 means:
If you have 2 Search Results web parts side-by-side (e.g. in a 2-column-section) and one of them has the setting "Hide this web part if there's nothing to show" set to TRUE, padding and margin are set to 0px - even if there are results to be shown.
If both web parts show results > 0, they are displayed misaligned.

Solution would be only to remove padding and margin, if there are no results - and not just if the setting is set to TRUE.

I will check the code and try to fix it.

[wobba]

@jblueml I see the issue in the code as you say.... web part removed padding based on the toggle only, not on the results coming back. Curious why I made it this way 😅

[wobba]

Fixed by #3867 in the dev branch and will part of the next release.