Custom Widget Scrollbar Look & Behavior (css ?)

Question

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.

Arne_Gelfert · Answer

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?

Arne_Gelfert · Answer

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.