Select to view content in your preferred language

Changes in Scalebar css not shown in WAB DE

1247
9
Jump to solution
10-28-2016 09:36 AM
TimHayes1
Deactivated User

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? 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

9 Replies
RickeyFight
MVP Regular Contributor

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 

TimHayes1
Deactivated User

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
Deactivated User

Yes, attached is a screenshot of the path. 

0 Kudos
RickeyFight
MVP Regular Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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;
}
TimHayes1
Deactivated User

No change. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

RickeyFight
MVP Regular Contributor

Robert code worked for me too.