topic Re: Changes in Scalebar css not shown in WAB DE in ArcGIS Web AppBuilder Questions

Changes in Scalebar css not shown in WAB DE

TimHayes1 — Fri, 28 Oct 2016 16:36:00 GMT

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?

Re: Changes in Scalebar css not shown in WAB DE

RickeyFight — Sun, 12 Dec 2021 02:57:46 GMT

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

.esriScalebarSecondNumber {
 left: 95%;
 white-space: nowrap;
 font-size: 20px;
 color: red;
padding: 10px;}‍‍‍‍‍‍

Should change the label

Re: Changes in Scalebar css not shown in WAB DE

TimHayes1 — Fri, 28 Oct 2016 17:08:14 GMT

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

Re: Changes in Scalebar css not shown in WAB DE

RobertScheitlin__GISP — Fri, 28 Oct 2016 17:12:05 GMT

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.

Re: Changes in Scalebar css not shown in WAB DE

TimHayes1 — Fri, 28 Oct 2016 17:33:01 GMT

Yes, attached is a screenshot of the path.

Re: Changes in Scalebar css not shown in WAB DE

RickeyFight — Fri, 28 Oct 2016 17:35:00 GMT

Try copying in the css i posted above. See if that changes the text.

Re: Changes in Scalebar css not shown in WAB DE

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:57:49 GMT

Tim,

Rickey is correct the css rule you are modifying is only for right to left languages and this does not apply to you. You sould use what Rickey provided or be a little more specific with your rule like:

.jimu-widget-scalebar .scaleLabelDiv .esriScalebarSecondNumber{
  white-space: nowrap;
  font-size: 16px;
  color: black;
  padding: 10px;
}‍‍‍‍‍‍

Re: Changes in Scalebar css not shown in WAB DE

TimHayes1 — Fri, 28 Oct 2016 17:51:40 GMT

No change.

Re: Changes in Scalebar css not shown in WAB DE

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:57:52 GMT

Tim,

Hmm... This worked fine for me:

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

.jimu-widget-scalebar .scaleLabelDiv .esriScalebarSecondNumber,
.jimu-widget-scalebar .scaleLabelDiv .esriScalebarFirstNumber,
.jimu-widget-scalebar .scaleLabelDiv .esriScalebarLabel{
  white-space: nowrap;
  font-size: 16px;
  color: black;
  padding-top: 2px;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Changes in Scalebar css not shown in WAB DE

RickeyFight — Fri, 28 Oct 2016 18:12:36 GMT

Robert code worked for me too.