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.
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.
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?