topic Re: how to change the coordinate-conversion button color in ArcGIS JavaScript Maps SDK Questions

how to change the coordinate-conversion button color

RichardRhone — Tue, 03 Sep 2019 17:48:17 GMT

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

Re: how to change the coordinate-conversion button color

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:00:29 GMT

Richard,

Use this rule then:

.esri-coordinate-conversion__select-row {
  background-color:blue;
}‍‍‍

Re: how to change the coordinate-conversion button color

RichardRhone — Tue, 03 Sep 2019 18:13:28 GMT

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

Re: how to change the coordinate-conversion button color

RobertScheitlin__GISP — Tue, 03 Sep 2019 18:20:41 GMT

Richard,

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

I want to change the select button

Re: how to change the coordinate-conversion button color

RichardRhone — Tue, 03 Sep 2019 18:30:15 GMT

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

Re: how to change the coordinate-conversion button color

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:00:32 GMT

Ah. So you want this then:

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

Re: how to change the coordinate-conversion button color

RichardRhone — Tue, 03 Sep 2019 19:01:32 GMT

Thanks Robert! This resolves the issue.

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

Re: how to change the coordinate-conversion button color

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:00:35 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: how to change the coordinate-conversion button color

RichardRhone — Thu, 05 Sep 2019 14:50:06 GMT

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