<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Browser Dependent Scrollbar Behavior (IE11 vs. Chrome) in JSAPI 3.x in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/browser-dependent-scrollbar-behavior-ie11-vs/m-p/187009#M17362</link>
    <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Cross-posting&amp;nbsp;for different audience from &lt;A _jive_internal="true" href="https://community.esri.com/thread/256757-custom-widget-scrollbar-look-behavior-css" target="_blank"&gt;here&lt;/A&gt;.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;How do I fix a strange looking and unresponsive scrollbar in Search widget, i.e. a scrollbar that disappears when clicked on. I thought I was missing some parameter. But when I switched from Chrome to IE, I realize it's all browser related.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;The following works in IE but not in Chrome:&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&lt;SPAN class="comment token"&gt;// This is part of custom widget for Web Appbuilder, thus 3.x&lt;/SPAN&gt;

&lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;mySearch &lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;new&lt;/SPAN&gt; &lt;SPAN class="token class-name"&gt;Search&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;{&lt;/SPAN&gt;
          sources&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;[&lt;/SPAN&gt; &lt;SPAN class="operator token"&gt;&amp;lt;&lt;/SPAN&gt;list &lt;SPAN class="keyword token"&gt;of&lt;/SPAN&gt; sources&lt;SPAN class="operator token"&gt;&amp;gt;&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;]&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          map&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;map&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          popupEnabled&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;false&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          autoSelect&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;false&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt; 
          enableSourcesMenu&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;false&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          enableSuggestions&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;true&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          maxSuggestions&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="number token"&gt;5&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          allPlaceholder&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="string token"&gt;"Example: John Wayne"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          autoNavigate&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;false&lt;/SPAN&gt;
&lt;SPAN class="punctuation token"&gt;}&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt; &lt;SPAN class="string token"&gt;"mySearch"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
&lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;mySearch&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;&lt;SPAN class="token function"&gt;startup&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;‍‍‍‍‍‍‍‍‍‍‍‍&lt;SPAN class="line-numbers-rows"&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;P&gt;I&amp;nbsp;have found that I can tweak the scrollbar look (width/color) by overriding parameters in :&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&lt;SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;"&gt;::-webkit-scrollbar&lt;/SPAN&gt;&lt;SPAN style="color: #000000;"&gt; &lt;/SPAN&gt;&lt;SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;"&gt;{&lt;/SPAN&gt;&lt;SPAN style="color: #000000;"&gt;
&amp;nbsp; &lt;/SPAN&gt;&lt;SPAN style="color: #990000;"&gt;...&lt;/SPAN&gt;&lt;SPAN style="color: #000000;"&gt;
&lt;/SPAN&gt;&lt;SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;"&gt;}&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;P&gt;But&amp;nbsp;what is the work-around for the click-on-scrollbar behavior? Thanks.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
    <pubDate>Sat, 11 Dec 2021 09:28:00 GMT</pubDate>
    <dc:creator>Arne_Gelfert</dc:creator>
    <dc:date>2021-12-11T09:28:00Z</dc:date>
    <item>
      <title>Browser Dependent Scrollbar Behavior (IE11 vs. Chrome) in JSAPI 3.x</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/browser-dependent-scrollbar-behavior-ie11-vs/m-p/187009#M17362</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;Cross-posting&amp;nbsp;for different audience from &lt;A _jive_internal="true" href="https://community.esri.com/thread/256757-custom-widget-scrollbar-look-behavior-css" target="_blank"&gt;here&lt;/A&gt;.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;How do I fix a strange looking and unresponsive scrollbar in Search widget, i.e. a scrollbar that disappears when clicked on. I thought I was missing some parameter. But when I switched from Chrome to IE, I realize it's all browser related.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;The following works in IE but not in Chrome:&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&lt;SPAN class="comment token"&gt;// This is part of custom widget for Web Appbuilder, thus 3.x&lt;/SPAN&gt;

&lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;mySearch &lt;SPAN class="operator token"&gt;=&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;new&lt;/SPAN&gt; &lt;SPAN class="token class-name"&gt;Search&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;{&lt;/SPAN&gt;
          sources&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;[&lt;/SPAN&gt; &lt;SPAN class="operator token"&gt;&amp;lt;&lt;/SPAN&gt;list &lt;SPAN class="keyword token"&gt;of&lt;/SPAN&gt; sources&lt;SPAN class="operator token"&gt;&amp;gt;&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;]&lt;/SPAN&gt; &lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          map&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;map&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          popupEnabled&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;false&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          autoSelect&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;false&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt; 
          enableSourcesMenu&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;false&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          enableSuggestions&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;true&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          maxSuggestions&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="number token"&gt;5&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          allPlaceholder&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="string token"&gt;"Example: John Wayne"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt;
          autoNavigate&lt;SPAN class="punctuation token"&gt;:&lt;/SPAN&gt; &lt;SPAN class="keyword token"&gt;false&lt;/SPAN&gt;
&lt;SPAN class="punctuation token"&gt;}&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;,&lt;/SPAN&gt; &lt;SPAN class="string token"&gt;"mySearch"&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;
&lt;SPAN class="keyword token"&gt;this&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;mySearch&lt;SPAN class="punctuation token"&gt;.&lt;/SPAN&gt;&lt;SPAN class="token function"&gt;startup&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;(&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;)&lt;/SPAN&gt;&lt;SPAN class="punctuation token"&gt;;&lt;/SPAN&gt;‍‍‍‍‍‍‍‍‍‍‍‍&lt;SPAN class="line-numbers-rows"&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;SPAN&gt;‍&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;P&gt;I&amp;nbsp;have found that I can tweak the scrollbar look (width/color) by overriding parameters in :&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;PRE class="lia-code-sample line-numbers language-none"&gt;&lt;CODE&gt;&lt;SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;"&gt;::-webkit-scrollbar&lt;/SPAN&gt;&lt;SPAN style="color: #000000;"&gt; &lt;/SPAN&gt;&lt;SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;"&gt;{&lt;/SPAN&gt;&lt;SPAN style="color: #000000;"&gt;
&amp;nbsp; &lt;/SPAN&gt;&lt;SPAN style="color: #990000;"&gt;...&lt;/SPAN&gt;&lt;SPAN style="color: #000000;"&gt;
&lt;/SPAN&gt;&lt;SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;"&gt;}&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/PRE&gt;&lt;P&gt;But&amp;nbsp;what is the work-around for the click-on-scrollbar behavior? Thanks.&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Sat, 11 Dec 2021 09:28:00 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/browser-dependent-scrollbar-behavior-ie11-vs/m-p/187009#M17362</guid>
      <dc:creator>Arne_Gelfert</dc:creator>
      <dc:date>2021-12-11T09:28:00Z</dc:date>
    </item>
  </channel>
</rss>

