Customize No Results Layout

[abhinavt]

Hello All,

Is there a way to customize "No Results" layout, we have few buttons at the top being hidden when widget has no data. Also adding the html script we're using. TIA

const dropdownWrapperHTML = `

<div class="dropdown-wrapper-${w.oid} ${dimname}-dropdown" style="position: relative; display: inline-block; width: 100%; max-width: fit-content;">

<label for="productDropdown-${w.oid}" style="cursor: pointer; margin-left: 21px; font-size: 12px; color: #007BFF;">

Product <span style="font-size: 10px; transition: transform 0.2s;">▼</span>

</label>

<span id="selectedProduct-${w.oid}" style="font-size: 12px; margin-left: 8px; color: #007BFF;">(None)</span>

<div class="dd-container-${w.oid}" style="position: absolute; top: 100%; left: 0; z-index: 1000; background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 8px; display: none; padding: 10px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);">

<input type="text" id="dropdown-search-${w.oid}" placeholder="Search products..." style="width: 100%; padding: 8px; margin-bottom: 5px; font-size: 12px; border: 1px solid #E0E0E0; border-radius: 4px;">

<div id="radioContainer-${w.oid}" style="max-height: 200px; overflow-y: auto;"></div>

</div>

</div>

`;

[DRay]

Hi @abhinavt,

Thank you for reaching out. Can you try this plugin and let us know if it works for you? https://community.sisense.com/t5/knowledge-base/custom-no-result-plugin/ta-p/9136

Thank you.

[DRay]

Hi @abhinavt,,

Another thing to look at is this post at binextlevel.com. https://www.binextlevel.com/post/custom-no-result-message

Can you let us know if either of these addresses your question?

Thank you.

[abhinavt]

Thanks for the help David. Looks like the plugin is around 6 years old so this has to tested across all environments and we might need more time on that. And on the link that you shared, it has the method to customize message or image but not the layout of the page. All we're looking for  is to adjust the size of the No-Results page..

[DRay]

Gotcha. If you want to try leaving a comment on that page the site author is usually pretty responsive. In fact, he's @harikm007 here on the Forums, you may recognize him! 😀

[abhinavt · Accepted solution]

We found a solution to customize the layout using the below script.

.widget-no-result-overlay.with-header { top: 50px; height: calc(100% - 50);}

[DRay]

Hi @abhinavt,

Thank you for following up. I'm glad you were able to find a solution!