identify widget 'selected' colors

[JasonStanton__GISP]

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!

[RobertScheitlin__GISP]

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

[JasonStanton__GISP]

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;

}

[RobertScheitlin__GISP · Accepted solution]

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);
      },

[JasonStanton__GISP]

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?

[RobertScheitlin__GISP]

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);
      },

[JasonStanton__GISP]

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