Latest Contributions by Brian_McLeer

@nafizpervez 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.        const STYLE = css` & { height: ${polished.rem(32)}; margin-top: 0; margin-left: 0; } &.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; } `;     ... View more