https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1588463#M86556 <P>can you try using this ?<BR /><BR /></P><LI-CODE lang="javascript">const STYLE = css` &amp; { height: ${polished.rem(32)}; margin-top: 0; margin-left: 0; } &amp;.search-container { width: 300px !important; } /* Ensure the search sources menu has a solid background */ .esri-search__sources-menu { background-color: #ffffff !important; border: 1px solid #dcdcdc; border-radius: 4px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); overflow: auto !important; } /* Ensure individual list items have correct background */ .esri-menu__list { background-color: #ffffff !important; } /* Ensure scrollbar is fully visible with a white background */ .esri-search__sources-menu::-webkit-scrollbar { width: 10px; background-color: #ffffff !important; /* Set a white background for the scrollbar */ border-radius: 4px; } .esri-search__sources-menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4) !important; border-radius: 4px; } /* Firefox scrollbar (optional) */ .esri-search__sources-menu { scrollbar-color: rgba(0, 0, 0, 0.4) #ffffff !important; /* Adjust to white background for Firefox */ scrollbar-width: thin !important; } /* **Selected state (when a user selects an option)** */ .esri-menu__list-item[aria-checked="true"], .esri-menu__list-item--active { background-color: #003A55 !important; color: #ffffff !important; font-weight: bold; } /* **Hover state (when a user hovers over an option before selecting)** */ .esri-menu__list-item:hover, .esri-menu__list-item:focus { background-color: #003A55 !important; color: #ffffff !important; } `;</LI-CODE><P>This could be due to how the browser handles background-color for the scroll bar itself.</P><P>To fix the issue and ensure the scrollbar has a solid white background, you can apply more specific CSS targeting for the scrollbar container and thumb</P><P><BR /><BR /></P> Mon, 24 Feb 2025 10:17:21 GMT nafizpervez 2025-02-24T10:17:21Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1588095#M86552 <P>I am working on a custom search widget using the <A href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-search-multiplesource/" target="_self">Search widget with multiple sources ArcGIS Maps SDK for JavaScript reference.</A>&nbsp;The widget is working as expected. I have a bug that keeps persisting where the results list scroll navigation bar keeps an transparent background, where instead I would like it to have a white background. Below my image I have included the CSS style const used to style the widget. It is hard to see in the image but the scroll bar to the right has a transparent fill.&nbsp;</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Brian_McLeer_0-1740158970662.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/126007i266F6B23FD9C6660/image-size/medium?v=v2&amp;px=400" role="button" title="Brian_McLeer_0-1740158970662.png" alt="Brian_McLeer_0-1740158970662.png" /></span></P><LI-CODE lang="css">const STYLE = css` &amp; { height: ${polished.rem(32)}; margin-top: 0; margin-left: 0; } &amp;.search-container { width: 300px !important; } /* Ensure the search sources menu has a solid background */ .esri-search__sources-menu { background-color: #ffffff !important; border: 1px solid #dcdcdc; border-radius: 4px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); overflow: auto !important; } /* Ensure individual list items have correct background */ .esri-menu__list { background-color: #ffffff !important; } /* Ensure scrollbar is fully visible */ .esri-search__sources-menu::-webkit-scrollbar { width: 10px; background-color: #f0f0f0 !important; border-radius: 4px; } .esri-search__sources-menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4) !important; border-radius: 4px; } /* Firefox scrollbar (optional) */ .esri-search__sources-menu { scrollbar-color: rgba(0, 0, 0, 0.4) #f0f0f0 !important; scrollbar-width: thin !important; } /* **Selected state (when a user selects an option)** */ .esri-menu__list-item[aria-checked="true"], .esri-menu__list-item--active { background-color: #003A55 !important; color: #ffffff !important; font-weight: bold; } /* **Hover state (when a user hovers over an option before selecting)** */ .esri-menu__list-item:hover, .esri-menu__list-item:focus { background-color: #003A55 !important; color: #ffffff !important; } `;</LI-CODE><P>&nbsp;</P><P>&nbsp;</P> Fri, 21 Feb 2025 17:35:19 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1588095#M86552 Brian_McLeer 2025-02-21T17:35:19Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1588463#M86556 <P>can you try using this ?<BR /><BR /></P><LI-CODE lang="javascript">const STYLE = css` &amp; { height: ${polished.rem(32)}; margin-top: 0; margin-left: 0; } &amp;.search-container { width: 300px !important; } /* Ensure the search sources menu has a solid background */ .esri-search__sources-menu { background-color: #ffffff !important; border: 1px solid #dcdcdc; border-radius: 4px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); overflow: auto !important; } /* Ensure individual list items have correct background */ .esri-menu__list { background-color: #ffffff !important; } /* Ensure scrollbar is fully visible with a white background */ .esri-search__sources-menu::-webkit-scrollbar { width: 10px; background-color: #ffffff !important; /* Set a white background for the scrollbar */ border-radius: 4px; } .esri-search__sources-menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4) !important; border-radius: 4px; } /* Firefox scrollbar (optional) */ .esri-search__sources-menu { scrollbar-color: rgba(0, 0, 0, 0.4) #ffffff !important; /* Adjust to white background for Firefox */ scrollbar-width: thin !important; } /* **Selected state (when a user selects an option)** */ .esri-menu__list-item[aria-checked="true"], .esri-menu__list-item--active { background-color: #003A55 !important; color: #ffffff !important; font-weight: bold; } /* **Hover state (when a user hovers over an option before selecting)** */ .esri-menu__list-item:hover, .esri-menu__list-item:focus { background-color: #003A55 !important; color: #ffffff !important; } `;</LI-CODE><P>This could be due to how the browser handles background-color for the scroll bar itself.</P><P>To fix the issue and ensure the scrollbar has a solid white background, you can apply more specific CSS targeting for the scrollbar container and thumb</P><P><BR /><BR /></P> Mon, 24 Feb 2025 10:17:21 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1588463#M86556 nafizpervez 2025-02-24T10:17:21Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1588566#M86564 <P>Thank you&nbsp;<a href="https://community.esri.com/t5/user/viewprofilepage/user-id/804533">@nafizpervez</a>. I did try the CSS STYLE block you provided, unfortunately the results scroll bar is still transparent. I have tested in Chrome, Edge and Firefox with the same results.&nbsp;</P><P>&nbsp;</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Brian_McLeer_0-1740412624647.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/126109i4FECC6660616327C/image-size/medium?v=v2&amp;px=400" role="button" title="Brian_McLeer_0-1740412624647.png" alt="Brian_McLeer_0-1740412624647.png" /></span></P><P>&nbsp;</P><P>&nbsp;</P> Mon, 24 Feb 2025 15:58:03 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1588566#M86564 Brian_McLeer 2025-02-24T15:58:03Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1590829#M86609 <P><a href="https://community.esri.com/t5/user/viewprofilepage/user-id/804533">@nafizpervez</a>&nbsp;I was able to get the CSS to work with the below update. The results list scroll bar background is no longer transparent. Thank you for your help with this.&nbsp;</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Brian_McLeer_0-1740765030263.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/126691iB3751EE3E198F5D8/image-size/medium?v=v2&amp;px=400" role="button" title="Brian_McLeer_0-1740765030263.png" alt="Brian_McLeer_0-1740765030263.png" /></span></P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P><LI-CODE lang="css">const STYLE = css` &amp; { height: ${polished.rem(32)}; margin-top: 0; margin-left: 0; } &amp;.search-container { width: 300px !important; background-color: #ffffff !important; position: relative !important; display: block !important; z-index: 1000 !important; } /* Ensure dropdown stays visible and inside widget */ .esri-search__sources-menu { background-color: #ffffff !important; border: 1px solid #dcdcdc !important; border-radius: 4px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2) !important; overflow-y: auto !important; max-height: 250px !important; width: 100% !important; position: absolute !important; top: 100% !important; left: 0 !important; z-index: 9999 !important; display: block !important; } /* Force solid background on results list */ .esri-menu__list { background-color: #ffffff !important; position: relative !important; z-index: 9999 !important; display: block !important; } /* Fix blocky hover issue by removing unwanted highlight effects */ .esri-menu__list-item { background-color: #ffffff !important; border-bottom: 1px solid #dcdcdc !important; display: block !important; /* Ensures proper alignment */ text-align: left !important; /* Keeps all text left-aligned */ padding: 8px 12px !important; /* Ensure even spacing */ transition: none !important; /* Remove delay for instant hover */ box-shadow: none !important; /* Ensure proper word wrapping and space handling */ white-space: pre-wrap !important; /* Preserves spaces and wraps naturally */ word-break: normal !important; /* Prevents breaking words mid-way */ overflow: visible !important; text-overflow: clip !important; text-transform: none !important; letter-spacing: normal !important; font-weight: normal !important; } /* Preserve spaces in search keywords */ .esri-menu__list-item strong { white-space: pre-wrap !important; /* Ensures spaces are kept as in GIS */ word-break: normal !important; /* Prevents breaking words mid-way */ display: inline !important; text-align: left !important; } /* Ensure second and third lines do not indent after the keyword */ .esri-menu__list-item span { display: block !important; /* Forces text to appear as a block */ white-space: pre-wrap !important; word-break: normal !important; text-align: left !important; margin-left: 0 !important; /* Prevents indentation */ padding-left: 0 !important; } /* Ensure text flows naturally within the container */ .esri-menu__list-item * { background-color: transparent !important; box-shadow: none !important; white-space: pre-wrap !important; word-break: normal !important; display: block !important; /* Forces proper alignment */ text-align: left !important; text-overflow: clip !important; } /* Instant hover effect with no delay */ .esri-menu__list-item:hover, .esri-menu__list-item:focus { background-color: rgba(0, 58, 85, 1) !important; /* Smooth dark hover effect */ color: #ffffff !important; transition: none !important; /* Remove any delay */ box-shadow: none !important; } /* Remove any extra background layers causing artifacts */ .esri-menu__list-item:hover::before, .esri-menu__list-item:focus::before, .esri-menu__list-item::before, .esri-menu__list-item::after { background: none !important; display: none !important; box-shadow: none !important; } /* Fix scrollbar transparency issue */ .esri-search__sources-menu::-webkit-scrollbar, .esri-menu::-webkit-scrollbar, .esri-menu__list::-webkit-scrollbar { width: 10px !important; background-color: #ffffff !important; border: none !important; } .esri-search__sources-menu::-webkit-scrollbar-track, .esri-menu::-webkit-scrollbar-track, .esri-menu__list::-webkit-scrollbar-track { background: #ffffff !important; /* White scrollbar track */ border-radius: 4px !important; box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 3px rgba(0, 0, 0, 0.2) !important; border: none !important; } .esri-search__sources-menu::-webkit-scrollbar-thumb, .esri-menu::-webkit-scrollbar-thumb, .esri-menu__list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4) !important; /* Dark scrollbar thumb */ border-radius: 4px !important; border: 2px solid #ffffff !important; } /* Enhanced Firefox scrollbar fix */ .esri-search__sources-menu, .esri-menu, .esri-menu__list, .esri-search__sources-menu * { scrollbar-color: rgba(0, 0, 0, 0.4) #ffffff !important; scrollbar-width: thin !important; background-color: #ffffff !important; /* Full white background */ } /* Target all possible parent containers */ .esri-search__container, .esri-search, .esri-view, .esri-view-root, .esri-ui, .esri-component { background-color: #ffffff !important; } /* Override any transparent backgrounds in the menu */ .esri-menu__list::before, .esri-menu__list::after, .esri-menu::before, .esri-menu::after, .esri-search__sources-menu::before, .esri-search__sources-menu::after { background: #ffffff !important; content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; } /* Fix header (All button) */ .esri-menu__header { background: #003A55 !important; color: #ffffff !important; font-weight: bold; padding: 10px; text-align: center; } /* Ensure text in results wraps correctly */ .esri-menu__list-item { white-space: pre-wrap !important; /* Ensures text wraps while keeping spaces */ overflow: visible !important; text-overflow: clip !important; } /* Selected state (when a user selects an option) */ .esri-menu__list-item[aria-checked="true"], .esri-menu__list-item--active { background-color: #003A55 !important; color: #ffffff !important; font-weight: bold; } `;</LI-CODE><P>&nbsp;</P><P>&nbsp;</P> Fri, 28 Feb 2025 18:01:52 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1590829#M86609 Brian_McLeer 2025-02-28T18:01:52Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1611843#M87090 <P>Thank you Brain. Learning something new everyday.<BR />Thanks again.&nbsp;</P> Tue, 06 May 2025 02:59:28 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-search-widget-results-scrollbar-is/m-p/1611843#M87090 nafizpervez 2025-05-06T02:59:28Z