dijit button style override

RebeccaWatson1 — Sun, 12 Dec 2021 09:24:04 GMT

I am attempting my first custom widget - a fairly simple coordinate tool - using the new javscript/html/css. I started with the custom GoToXY tool and was playing around adding a bit a functionality and styling it up but I have an issue with buttons. I have tried to override the default button style by adding in baseClass:myButton and creating my own style in the style.css but I'm getting the changes I've asked for (the red line border around the Copy EN button in the image below) and I'm also getting a grey outline around the Copy EN button label too and I cannot seem to find where it is coming from. I've search for an answer and I'm thinking it is because the style is being overriding by something but I've used the developer tools on IE to try and find what it and still cannot find where the outline is from - can anyone enlighten me?

Here is the full code for the custom widget...

HTML

<div>
     <div>
     <div class="identify-tab-node" data-dojo-attach-point="tabNode3">
           <div class="outerBox">
                     <div class="leader">Enter coordinates:</div>
                     <div class="wrapper">
                    E: <input
                                   class="xyinput"
                                   id="ProjXBox"
                                   data-dojo-type="dijit/form/TextBox"
                                   placeHolder="203331.090"
                                   data-dojo-attach-point="ProjXBox"
                                   data-dojo-props="intermediateChanges:true, placeHolder:'-80.7352016'">
                          </input>
                    N: <input
                               class="xyinput"
                               id="ProjYBox"
                               data-dojo-type="dijit/form/TextBox"
                               placeHolder="546315.655"
                               data-dojo-attach-point="ProjYBox"
                               data-dojo-props="intermediateChanges:true, placeHolder:'-80.7352016'">
                          </input>
                    </div>
                    <div id="GoTo_btn" data-dojo-attach-point="createPointIdNode"></div>
                    <div id="GoTo_btn1" data-dojo-attach-point="removePointIdNode"></div>
               </div>
          </div>
     </div>
<br>
     <div class="outerBox">
          <div class="leader">Get coordinates:</div>
          <div class="wrapper">
     E: <div class="xyresult" id="CurrentX">Click Map</div>
     N: <div class="xyresult" id="CurrentY">Click Map</div>
       </div>
          <div data-dojo-attach-point="copyToClipboardNode"></div>
     </div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

CSS

.jimu-widget-panel .jimu-foldable-dijit .jimu-foldable-panel {
  position:relative;
  width:360px;
  height:150px;
  min-width:150px;
  min-height:150px;
}

.jimu-widget-GoToXY {
  position:relative;
  width:100%;
  height:20%;
  min-width:150px;
  min-height:150px;
}

.jimu-widget-GoToXY:hover {
}

path[data-uniquevalue="GoToXY"] {
  fill: none;
  stroke: #009900;
  stroke-width: 3;
  stroke-opacity: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;

  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: pulse2;
  -moz-animation-duration: 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-animation-name: pulse2;
}
@-webkit-keyframes pulse2 {
     0% {
       opacity: 0.55;
       stroke-width: 25k;
       stroke: #339966;
     }
     45% {
       opacity: 0.7;
       stroke-width: 15;
       stroke: #00cc66;
     }
     100% {
       opacity: 0.8;
       stroke-width: 2;
       stroke: #009933;
     }
     }
     @-moz-keyframes pulse2 {
     0% {
       opacity: 0.55;
       stroke-width: 25;
       stroke: #339966;
     }
     45% {
       opacity: 0.7;
       stroke-width: 15;
       stroke: #00cc66;
     }
     100% {
       opacity: 0.85;
       stroke-width: 2;
       stroke: #009933;
     }
}
#GoTo_btn {
  display: inline-block;
}

#GoTo_btn1 {
  display: inline-block;
}

.leader {
  text-align: left;
  font-size: 18;
  font-weight: bold;
  padding: inherit;
}

.outerBox {
  border: 1px solid #d0d0e2;
  border-radius: 5px;
  background-color: #efeff5;
  padding: 5px 10px;
  text-align: right;
}

.wrapper{
  text-align: center;
  padding: 5px 10px;
}

.xyinput{
  margin: auto;
  width: 37%;
  display:inline-block;
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px 15px;
  background-color: #ffffff;
  color: #888;
}

/*.xyinput:focus{
  color: #888;
}*/

.xyresult{
  margin: auto;
  width: 37%;
  display:inline-block;
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px 15px;
  background-color: #ffffff;
  color: #888;
}

.myButton{
border-radius:6px;
border:1px solid red;
cursor:pointer;
color:#777777;
font-family:Arial;
font-size:13px;
font-weight:bold;
padding:5px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and the javascript

define([
  'dojo/_base/declare',
  'jimu/BaseWidget',
  'jimu/utils',
  'dijit/form/Button',
  'esri/symbols/SimpleMarkerSymbol',
  'esri/geometry/Point',
  'esri/graphic',
  'esri/layers/GraphicsLayer',
  'esri/Color',
  'dojo/on',
  'dojo/_base/lang',
  'dojo/query',
  'esri/map',
  "esri/geometry/webMercatorUtils",
  "dojo/dom"
  ],

function(
  declare,
  BaseWidget,
  utils,
  Button,
  SimpleMarkerSymbol,
  Point,
  Graphic,
  GraphicsLayer,
  Color,
  on,
  lang,
  query,
  Map,
  webMercatorUtils,
  dom
  )
{

  return declare([BaseWidget],
  {
    name: 'GoToXY', baseClass: 'jimu-widget-GoToXY',

  postCreate: function()
  {
    console.log("postCreate!");
       var mapFrame = this;
    this.inherited(arguments);
    this.addPointsButton = new Button({label: "Go to"}).placeAt(this.createPointIdNode);
       this.clearPointsButton = new Button({label: "Clear"}).placeAt(this.removePointIdNode);
    this.copyToClipboardButton = new Button({label:"Copy EN", baseClass: "myButton"}).placeAt(this.copyToClipboardNode);
    this.addPointsButton.startup();
  },

  startup: function()
  {
    console.log("startup!");
    this.layer = new GraphicsLayer({dataAttributes:["id"]});
        if (this.layer.surfaceType === "svg")
        {
          on(this.layer, "graphic-draw", function (evt)
          {
              console.log("graphic-draw");
              var renderercategory;
              renderercategory = "GoToXY";
              evt.node.setAttribute("data-uniquevalue", renderercategory);
          });
        }
    this.map.addLayer(this.layer);
    on(this.addPointsButton, "click", lang.hitch(this, "createPoint"));
       on(this.clearPointsButton, "click", lang.hitch(this, "clearPoint"));
    on(this.copyToClipboardButton, "click", lang.hitch(this, "copyXY"));
    on(this.map, "click", lang.hitch(this, "getXY"));
    console.log("this.map: ", this.map);
  },

  getXY: function(evt)
  {
    var mp = evt.mapPoint;
    dom.byId("CurrentX").innerHTML = mp.x.toFixed(3);
    dom.byId("CurrentY").innerHTML = mp.y.toFixed(3);
  },

  copyXY: function()
  {
    // var curX = dom.byID("CurrentX").value;
    var curX = dom.byId("CurrentX").innerHTML;
    var curY = dom.byId("CurrentY").innerHTML;

    // query(".xyresult").style("background-color", "#e6b3cc");
    query(".xyresult").style("border", "2px solid #ff4d4d");
    setTimeout(function()
    {
      //query(".xyresult").style("background-color", "#d1d1e0");
      query(".xyresult").style("border", "1px solid black");
    },300);
    //curX.style.background = 'red';
    var xy = curX + ", "+ curY;
    // var aux = document.createElement("input");
    var aux = dojo.create("input");
    aux.setAttribute("value", xy);
    // document.body.appendChild(aux);
    dojo.doc.body.appendChild(aux);
    aux.select();
    document.execCommand("copy");
    document.body.removeChild(aux);
  },


  createPoint: function()
  {
       var xx=Number(dom.byId("ProjXBox").value);
       var yy=Number(dom.byId("ProjYBox").value);
    console.log("createPoint!");
       var ZoomIt = Number(3);
    var sympath = "M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16.125c-3.383 0-6.125-2.742-6.125-6.125s2.742-6.125 6.125-6.125 6.125 2.742 6.125 6.125-2.742 6.125-6.125 6.125zM12.125 10c0-2.14 1.735-3.875 3.875-3.875s3.875 1.735 3.875 3.875c0 2.14-1.735 3.875-3.875 3.875s-3.875-1.735-3.875-3.875z";
    var symcolor = "#ff0000";
    var sym = new SimpleMarkerSymbol();
    sym.setPath(sympath);
    sym.setColor(new Color(symcolor));
    sym.setOutline(null);
    sym.setSize("30");
    var randx = document.getElementById("ProjXBox").value;
    var randy = document.getElementById("ProjYBox").value;
    var attr = {"id":"rand"};

    var zoomPoint = new esri.geometry.Point(Number(randx),Number(randy), this.map.spatialReference);
        this.map.centerAndZoom(zoomPoint,10);

    var pt = new Point(randx, randy, this.map.spatialReference);

       pntd=new Graphic(pt, sym, attr);
        this.layer.add(pntd);
  },
       clearPoint: function()
    {
      this.layer.clear();
       }
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Many thanks for any pointers in advance.

Re: dijit button style override

ofrig — Thu, 01 Jun 2017 05:23:47 GMT

Hello Rebecca,

I made the functionality by let the usr press on map with ctrl key to get the coordintes from the map:

startup: function() {

on(this.map, "click", lang.hitch(this, "clickin"));
console.log("startup!");

this.layer = new GraphicsLayer({
dataAttributes:["id"]
});
if (this.layer.surfaceType === "svg") {
on(this.layer, "graphic-draw", function (evt) {
console.log("graphic-draw");
var renderercategory;
renderercategory = "GoToXY";
evt.node.setAttribute("data-uniquevalue", renderercategory);
});
}
this.map.addLayer(this.layer);

on(this.addPointsButton, "click", lang.hitch(this, "createPoint"));
on(this.clearPointsButton, "click", lang.hitch(this, "clearPoint"));
console.log("this.map: ", this.map);
},
clickin: function(event) {
console.log("event", event.ctrlKey);
if (event.ctrlKey) {
console.log("click x", event.mapPoint.x);
console.log("click y", event.mapPoint.y);
document.getElementById("ProjXBox").value=event.mapPoint.x;
document.getElementById("ProjYBox").value=event.mapPoint.y;
}

},

Re: dijit button style override

RebeccaWatson1 — Fri, 02 Jun 2017 14:20:30 GMT

Hi and thanks for your reply. I was more looking for help with styling, not the functionality. Specifically for a reason why the Copy EN button has both a grey outline and a red outline when my CSS states a red outline. I can work around it, but because I'm just starting out using this set-up it's good to get to the bottom of why these things happen so they can be fixed in the future.

Thanks again.

Re: dijit button style override

RobertScheitlin__GISP — Sun, 04 Jun 2017 01:16:16 GMT

Rebecca,

It is going to be a dojo theme css rule that is causing you your issue. Based on the simplicity of your desired button UI I would not recommend using an actual dojo button at all just add a div with a set height width and other css styling rules and attach the click event to it.

Re: dijit button style override

RebeccaWatson1 — Mon, 05 Jun 2017 08:17:30 GMT

Hi Robert,

I suspected it would be something like this - my starting point was someone else's widget so I was going along with a similar set up. I will rework this as you suggest. It also looks like I need to get a better understanding of dojo - I'll add it to my ever-growing list of things to investigate!

Thanks again.

Re: dijit button style override

Arne_Gelfert — Fri, 16 Oct 2020 15:26:56 GMT

Great suggestion! Think I've had about enough of dojo... I'm replacing all my button's in my latest widget with simple buttons. Great example that can be made to look almost like existing dojo button and comes without all the themes/CSS headaches is here - Edit fiddle - JSFiddle - Code Playground.

Re: dijit button style override

Anonymous User — Wed, 17 Mar 2021 18:14:28 GMT

This answer comes years late (as I went trying to figure this out today).

You can override the base class when you initialize the widget (button) Per: https://dojotoolkit.org/reference-guide/1.6/styleguides/css.html

Eg.

this.dlBtn = new Button({ label:"Download", baseClass:"myOverRideClass"}, btnDiv);

topic Re: dijit button style override in Web AppBuilder Custom Widgets Questions

dijit button style override

Re: dijit button style override

Re: dijit button style override

Re: dijit button style override

Re: dijit button style override

Re: dijit button style override

Re: dijit button style override