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; } } }

Changes in Scalebar css not shown in WAB DE

TimHayes1

I went into the \WebAppBuilder\WAB2_0\server\apps\11\widgets\Scalebar\setting\css and changed padding to 10px and the font-size and color:

.jimu-widget-scalebar-setting{
margin:0;
padding:10px;
font-size: 16px;
color: #161616;

The changes are not shown when I launch my app. I cleared my browser cache/history, refreshed, and still no change.

Is there something else I need to change?

Najděte více příspěvků označených jako

Accepted answers

RobertScheitlin__GISP

Tim,

Hmm... This worked fine for me:

<SPAN class="punctuation token">.</SPAN>jimu<SPAN class="operator token">-</SPAN>widget<SPAN class="operator token">-</SPAN>scalebar <SPAN class="punctuation token">.</SPAN>ruler<SPAN class="operator token">-</SPAN>style <SPAN class="punctuation token">{</SPAN>
&nbsp; position<SPAN class="punctuation token">:</SPAN> relative<SPAN class="punctuation token">;</SPAN>
&nbsp; top<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN>15px <SPAN class="operator token">!</SPAN>important<SPAN class="punctuation token">;</SPAN>
&nbsp; left<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">!</SPAN>important<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="punctuation token">.</SPAN>jimu<SPAN class="operator token">-</SPAN>widget<SPAN class="operator token">-</SPAN>scalebar <SPAN class="punctuation token">.</SPAN>scaleLabelDiv <SPAN class="punctuation token">.</SPAN>esriScalebarSecondNumber<SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">.</SPAN>jimu<SPAN class="operator token">-</SPAN>widget<SPAN class="operator token">-</SPAN>scalebar <SPAN class="punctuation token">.</SPAN>scaleLabelDiv <SPAN class="punctuation token">.</SPAN>esriScalebarFirstNumber<SPAN class="punctuation token">,</SPAN>
<SPAN class="punctuation token">.</SPAN>jimu<SPAN class="operator token">-</SPAN>widget<SPAN class="operator token">-</SPAN>scalebar <SPAN class="punctuation token">.</SPAN>scaleLabelDiv <SPAN class="punctuation token">.</SPAN>esriScalebarLabel<SPAN class="punctuation token">{</SPAN>
&nbsp; white<SPAN class="operator token">-</SPAN>space<SPAN class="punctuation token">:</SPAN> nowrap<SPAN class="punctuation token">;</SPAN>
&nbsp; font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 16px<SPAN class="punctuation token">;</SPAN>
&nbsp; color<SPAN class="punctuation token">:</SPAN> black<SPAN class="punctuation token">;</SPAN>
&nbsp; padding<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> 2px<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

TimHayes1

Yes, attached is a screenshot of the path.

RobertScheitlin__GISP

Tim,

Are you sure you did it in the right folder as Rickey advised:

\WebAppBuilder\WAB2_0\server\apps\11\widgets\Scalebar\css

Notice not "Settings" in the path.

TimHayes1

Nope, no change. Here is what I did:

jimu-rtl .jimu-widget-scalebar .scaleLabelDiv .esriScalebarLabel:first-child{
right: -3% !important;
left: auto !important;
};

.jimu-rtl .jimu-widget-scalebar .scaleLabelDiv .esriScalebarFirstNumber{
right: 45% !important;
left: auto;
}

.jimu-rtl .jimu-widget-scalebar .scaleLabelDiv .esriScalebarSecondNumber{
right: 95%;
left: auto;
white-space: nowrap;
font-size: 16px;
color: black;
padding: 10px;
}

.jimu-widget-scalebar .ruler-style {
position: relative;
top: -5px !important;
left: 0 !important;
}

RickeyFight

Look in WebAppBuilderForArcGIS\server\apps\4\widgets\Scalebar\css

<SPAN class="selector token">.esriScalebarSecondNumber</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 95%<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">white-space</SPAN><SPAN class="punctuation token">:</SPAN> nowrap<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> red<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 10px<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>

Should change the label

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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