nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Changing Style for Line Scalebar

TimHayes1

I am using WAB Developer Edition 2.0.

Can someone assist me in checking this code? I am trying to change the style of Line (not the Ruler) Scalebar in the Scalebar Widget. Here is the css style code I modified, but it does not seem to change the Line Scalebar.

What needs to be changed or added?

Thank you in advance for your help.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Tim,

Here is the new css rules:

<SPAN class="selector token">.jimu-widget-scalebar .esriScalebarLine</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 12px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN> 4px solid #444444<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.jimu-widget-scalebar .esriScalebarEnglishLine</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">border-bottom-style</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> -9px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RobertScheitlin__GISP

Rohit,

You will want to pay attention to the GeoNet Space you post questions in. This is the Web AppBuilder space and is not appropriate for ArcGIS Pro or Pyton questions.

Rohit_Venkat_GandhiMendadhala4

Can we change the style of the scale bar in the layout in Arc GIS Pro using Python?

RobertScheitlin__GISP

Tim,

No problem. I was not sure exactly you wanted to change so I just made the line thicker.

TimHayes1

Thanks Robert. I am still refreshing my memory on the CSS Rules. It's been awhile.

RobertScheitlin__GISP

Tim,

Here is the new css rules:

<SPAN class="selector token">.jimu-widget-scalebar .esriScalebarLine</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 12px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN> 4px solid #444444<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.jimu-widget-scalebar .esriScalebarEnglishLine</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">border-bottom-style</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> -9px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.