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);}
