[OpenLayers-Users] Custom EditingToolbar displays the wrong button icon

[Adrian Popa]

Well, I ran into the same problem while adding a custom button (revert 
changes).
Here's my code:

//overload the EditingToolbar initialize function:
     OpenLayers.Control.EditingToolbar.prototype.initialize = 
function(layer, options){
             OpenLayers.Control.Panel.prototype.initialize.apply(this, 
[options]);

         this.addControls(
           [ new OpenLayers.Control.Navigation() ]
         );
         var controls = [
           new OpenLayers.Control.DrawFeature(layer, 
OpenLayers.Handler.Point, {'displayClass': 'olControlDrawFeaturePoint'}),
           new OpenLayers.Control.Button({ title: "Save changes",
                                                   trigger: function() {
                                                       saveStrategy.save();
                                                       //after saving 
clear the dynamic items displayed
                                                       
layer.destroyFeatures();
                                                   },
                                                   displayClass: 
"olControlSaveFeatures"
                                                   }),
           new OpenLayers.Control.Button({ title: "Revert changes",
                                                   trigger: function() {
                                                       
layer.destroyFeatures();
                                                   },
                                                   displayClass: 
"revertButton"       // show a custom icon
                                                   }),
         ];
         this.addControls(controls);

     };
     editingToolbar = new OpenLayers.Control.EditingToolbar( 
editableLayer ) ;
     map.addControl( editingToolbar );

This is the CSS that is loaded in the map:

div.revertButtonItemInactive {
          background-image:url("symbols/revert.png");
         background-position:0 1px;
         background-repeat:no-repeat;
      }
      div.revertButtonItemActive {
          background-image:url("symbols/revert.png");
         background-position:0 1px;
         background-repeat:no-repeat;
      }

When I inspect with firebug I can see that my icon is overriden by the 
EditingToolbar:
.olControlEditingToolbar div {
     background-image:url("img/editing_tool_bar.png");
     background-repeat:no-repeat;
     float:right;
     height:24px;
     margin:5px;
     width:24px;
}
div.revertButtonItemInactive {
     background-image:url("symbols/revert.png");  //striken in firebug
     background-position:0 1px;
     background-repeat:no-repeat;  //striken in firebug
}

For a similar save button (which comes bundled in OL), the difference is 
that the order of the two CSS sections is reversed.

How can I reverse them back/fix this issue?
Regards,
Adrian

On 07/06/2010 11:54 AM, Adrian Popa wrote:
> Update - I've upgraded from OpenLayers 2.8 to 2.9.1 and the issue is
> fixed. :)
>
> The toolbar looks fine now. Should have tried to update sooner...
>
> Regards,
> Adrian
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
>    


-- 
---
Adrian Popa
NOC Division
Network Engineer
Divizia Centrul National de Operare Retea
Departament Transport IP&  Metro
Compartiment IP Core&  Backbone
Phone: +40 21 400 3099