Forum Discussion

abhinavt's avatar
abhinavt
Cloud Apps
11-14-2024
Solved

Customize No Results Layout

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>
`;
  • We found a solution to customize the layout using the below script.

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

6 Replies

  • 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's avatar
      DRay
      Admin

      Hi abhinavt,

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

  • 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's avatar
      DRay
      Admin

      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! ğŸ˜€