topic Custom Widget Scrollbar Look & Behavior (css ?) in ArcGIS Web AppBuilder Questions

Custom Widget Scrollbar Look & Behavior (css ?)

Arne_Gelfert — Sun, 12 Dec 2021 05:38:22 GMT

Full disclosure: I've developed a few custom widgets now and am having fun with it but I have not touched any CSS in the process. So I've looked here: CSS framework—ArcGIS Web AppBuilder (Developer Edition) | ArcGIS for Developers and here: Make widgets user-friendly—ArcGIS Web AppBuilder (Developer Edition) | ArcGIS for Developers and here: Web AppBuilder Custom Widget | geodev-hackerlabs but no answer yet. -- Anyone have some better WAB related tutorial up their sleeve?

I have a wonderful WAB custom widget that has only one issue. The scrollbar in a search box is super narrow and unusable.

I've plowed through the mostly indecipherable CSS in apps\<999>\jimu.js\css searching for references to scrollbar. All I found was in jimu.css ...

::-webkit-scrollbar {
  border-radius: 3px;
  /* width was 6px changed to 10px */
  width: 6px;
  background-color: #EEEEEE;
  height: 6px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍

when I made the above change, that has the desired effect. But is that the way to do it? How do I reference this same element in my custom widget style.css? Copying the above in there didn't work.

And why is it that as soon as I click on the scrollbar, it disappears. You can scroll through the records using either and or the mouse wheel but not by clicking/holding down scrollbar.Is this search widget behavior and controlled through parameters there, or some event handler, or CSS? Thanks.

Re: Custom Widget Scrollbar Look & Behavior (css ?)

Arne_Gelfert — Sun, 12 Dec 2021 05:38:24 GMT

I guess could have provided a little more detail... the part of my custom widget I'm looking at uses an instance of Search (JSAPI 3.x). Code looks like this:

this.mySearch = new Search({
          sources: [ <list of sources> ] ,
          map: this.map,
          popupEnabled: false,
          autoSelect: false, 
          enableSourcesMenu: false,
          enableSuggestions: true,
          maxSuggestions: 5,
          allPlaceholder: "Example: John Wayne",
          autoNavigate: false
}, "mySearch");
this.mySearch.startup();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This puts a sweet little search window with suggestions in my widget. Everything is working great, except the scrollbar. Where do I tweak this? My style.css is blank.

Re: Custom Widget Scrollbar Look & Behavior (css ?)

Arne_Gelfert — Mon, 20 Jul 2020 20:28:52 GMT

As a habitual Chromehead, I just tried this in IE 11, and the scrollbar disappeared. Interesting... is this some kind of browser compatibility thing? And if so, any workarounds?