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
Solved! Go to Solution.
Ah. So you want this then:
.esri-coordinate-conversion .esri-widget--button {
background-color: blue;
}
Richard,
Use this rule then:
.esri-coordinate-conversion__select-row {
background-color:blue;
}
Thanks for the reply, Robert. However, this changes the select. I want to change the select button as seen below
Richard,
Hmm... That is exactly what it does for me.
I want to change the select button
That's the result i got too. However, I actually want to change the button circled below to blue
Ah. So you want this then:
.esri-coordinate-conversion .esri-widget--button {
background-color: blue;
}
Thanks Robert! This resolves the issue.
Another question...... is it possible to disable the button as well
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>
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