how to change the coordinate-conversion button color

281
8
Jump to solution
09-03-2019 10:48 AM
RichardRhone
New Contributor III

I want to change the color of the coordinate-conversion button only. have tried 

.esri-widget--button
{
background-color:blue;
}

but this changes all widgets 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Ah. So you want this then:

.esri-coordinate-conversion .esri-widget--button {
  background-color: blue;
}

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Richard,

Use this rule then:

.esri-coordinate-conversion__select-row {
  background-color:blue;
}
0 Kudos
RichardRhone
New Contributor III

Thanks for the reply, Robert. However, this changes the select. I want to change the select button as seen below 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Richard,

Hmm... That is exactly what it does for me. 

I want to change the select button

0 Kudos
RichardRhone
New Contributor III

That's the result i got too. However, I actually want to change the button circled below to blue

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ah. So you want this then:

.esri-coordinate-conversion .esri-widget--button {
  background-color: blue;
}
RichardRhone
New Contributor III

Thanks Robert!   This resolves the issue. 

Another question...... is it possible to disable the button as well

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Richard,

Quite a bit more to that assuming you want to be able to re-enable it in code too.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>CoordinateConversion widget - 4.12</title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      .esri-coordinate-conversion .esri-widget--button {
        background-color: blue;
      }
      
      .btndisabled {
        pointer-events: none;
      }
    </style>
    <script src="https://js.arcgis.com/4.12/"></script>
    <script>
      require([
        "esri/views/MapView",
        "esri/widgets/CoordinateConversion",
        "esri/Map",
        "dojo/query",
        "dojo/dom-class",
        "esri/core/watchUtils"
      ], function(MapView, CoordinateConversion, Map, query, domClass, watchUtils) {
        var map = new Map({
          basemap: "topo"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-117.049, 34.485],
          zoom: 12
        });

        var ccWidget = new CoordinateConversion({
          view: view
        });

        view.ui.add(ccWidget, "bottom-left");
        
        watchUtils.watch(ccWidget.viewModel, 'state', function(evt){
          var button = query(".esri-coordinate-conversion .esri-widget--button")[0];
          console.info(button);
          domClass.add(button, "btndisabled");
        });
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>
0 Kudos
RichardRhone
New Contributor III

Thanks Robert!

Had to update the style part as the button was still enabled on some browsers 

<style>

        button:disabled,

        button[disabled] {

            border: 1px solid #999999;

            background-color: transparent;

            color: transparent;

        }

</style>

This achieves exactly what i was looking for. Basically, i used the widget to custom convert. However, I dont want users to have an option to change this 

0 Kudos