Custom Search Widget: Results scrollbar is transparent

[Brian_McLeer]

I am working on a custom search widget using the Search widget with multiple sources ArcGIS Maps SDK for JavaScript reference. 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. 

const STYLE = css`
  & {
    height: ${polished.rem(32)};
    margin-top: 0;
    margin-left: 0;
  }

  &.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;
  }
`;

[nafizpervez]

can you try using this ?

const STYLE = css`
  & {
    height: ${polished.rem(32)};
    margin-top: 0;
    margin-left: 0;
  }

  &.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;
  }
`;

This could be due to how the browser handles background-color for the scroll bar itself.

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

[Brian_McLeer]

Thank you @nafizpervez. 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. 

[Brian_McLeer · Accepted solution]

@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;
  }
`;