topic Re: identify widget 'selected' colors in ArcGIS Web AppBuilder Questions

identify widget 'selected' colors

JasonStanton__GISP — Tue, 02 Feb 2016 12:59:10 GMT

In the Identify Widget (wab v1.3) I am trying to modify the colors of the "identify-list-item"s. I have the "item" as white, the "alt" as blue and both "selected"s as green. However, when I select an item it obtains the same color as the "alt" (blue). I have done the same thing for the eLocate widget and it works fine. Anyone have any ideas?...it would be greatly appreciated!

Re: identify widget 'selected' colors

RobertScheitlin__GISP — Tue, 02 Feb 2016 13:33:12 GMT

Jason,

What theme are you using? Did you adjust the css for that specific themes .identify-list-item.selected and .identify-list-item.selected.alt

Re: identify widget 'selected' colors

JasonStanton__GISP — Tue, 02 Feb 2016 13:59:11 GMT

Robert, I appreciate your help! I am using the foldable theme and yes I edited the appropriate css as suggested (hopefully correctly). Here is a link to a test app if it helps. Also, here is the code relative to this discussion:

.identify-list-item{

line-height: 30px;

font-size: 12px;

white-space: pre;

position: relative;

}

AND

.identify-list-item.alt{

background-color: #d3d3f2;

outline: auto;

outline-color: #000;

}

.identify-list-item.selected{

background-color: #86B186;

}

.identify-list-item.selected.alt{

background-color: #86B186;

}

.identify-list-item:hover{

background-color: #9393df;

}

.identify-list-item.alt:hover{

background-color: #9393df;

}

.identify-list-item.selected:hover{

background-color: #9393df;

}

.identify-list-item.selected.alt:hover{

background-color: #9393df;

}

Re: identify widget 'selected' colors

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:03:34 GMT

Jason,

So it looks like I have some work to do for the next release with this...

In the List.js comment out these two lines (line 14 and 31) as indicated in the code below:

      _onMouseOver: function(evt) {
        if (evt.target.id === '' && evt.target.parentNode.id === '') {
          return;
        }
        var id = evt.target.id.toLowerCase();
        if (!id) {
          id = evt.target.parentNode.id;
        }
        var item = this._getItemById(id);
        if (!item) {
          return;
        }

        //this._selectedNode = id;
        this.emit('mouseover', this.selectedIndex, item);
      },

      _onMouseOut: function(evt) {
        if (evt.target.id === '' && evt.target.parentNode.id === '') {
          return;
        }
        var id = evt.target.id.toLowerCase();
        if (!id) {
          id = evt.target.parentNode.id;
        }
        var item = this._getItemById(id);
        if (!item) {
          return;
        }

        //this._selectedNode = id;
        this.emit('mouseout', this.selectedIndex, item);
      },

Re: identify widget 'selected' colors

JasonStanton__GISP — Tue, 02 Feb 2016 16:53:59 GMT

Robert - that worked, if I select a record the appropriate color is used. However, if i click on a record ("item", color=white), then any other record , the originally selected record is shaded with the "Item.alt" color (blue), rather than reverting to the "item" (white) color. Does that make sense?

Re: identify widget 'selected' colors

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:03:37 GMT

Jason,

It does make sense as I forgot to give you another necessary change:

Update the _onClick function to this one:

      _onClick: function(evt) {
        if (evt.target.id === '' && evt.target.parentNode.id === '') {
          return;
        }
        var id = evt.target.id.toLowerCase();
        if (!id) {
          id = evt.target.parentNode.id;
        }
        var item = this._getItemById(id);
        if (!item) {
          return;
        }

        domClass.replace(id, this._itemSelectedCSS, ((item.alt) ? this._itemAltCSS:this._itemCSS));
        if (this._selectedNode) {
          var item_selected = this._getItemById(this._selectedNode);
          if(item_selected){
            domClass.replace(this._selectedNode, ((!item_selected.alt)? this._itemAltCSS:this._itemCSS), this._itemSelectedCSS);
          }
        }
        this._selectedNode = id;
        this.emit('click', this.selectedIndex, item);
      },

Re: identify widget 'selected' colors

JasonStanton__GISP — Tue, 02 Feb 2016 17:23:43 GMT

That did the trick. Once again thank you very much!