I have a toolbar with icon-only buttons. This was working with version .4, but breaks in mysterious ways with Ext 1.0alpha2. I have made several changes to my CSS and got it from totally messed up to not bad (see http://www.yui-ext.com/forum/viewtopic.php?t=2832), but there are still two problems:
1) The icons are a couple of pixels too high on the toolbar.
2) On mouseover, the icon gets replaced by what should be a background image.
Here's the bar - normal on top, mouseover below:
For problem 1, I have tried putting margin-top: 2px or padding-top: 2px on the button CSS in several places. The ones that do anything at all cause the toolbar itself to get some strange padding. I can't figure out what to change in the CSS to move the icons down 2 pixels without messing up something else.
For problem 2, the button is defined as (example):
and the CSS is:
I have traced the problem as far as the CSS in ext-all.css for the mouseover:
Remove those lines, and there is no mouseover action. Which is not what I want - I just want my icon on top of the nice rectangle on mouseover. It appears that the background image in the ext-all CSS is overlaying my background image.
I have been fighting with this for 3 hours and I can't figure it out. Help!
1) The icons are a couple of pixels too high on the toolbar.
2) On mouseover, the icon gets replaced by what should be a background image.
Here's the bar - normal on top, mouseover below:
![](http://lettuce.tapor.uvic.ca/~dbadke/img/toolbar.jpg)
For problem 1, I have tried putting margin-top: 2px or padding-top: 2px on the button CSS in several places. The ones that do anything at all cause the toolbar itself to get some strange padding. I can't figure out what to change in the CSS to move the icons down 2 pixels without messing up something else.
For problem 2, the button is defined as (example):
tb.addButton({ tooltip: 'Next object', cls: 'x-btn-icon next-btn', handler: this.nextObject, scope: this});
.next-btn { background-image: url('../images/next.gif'); } .x-item-disabled .next-btn { background-image: url('../images/next-cold.gif'); }
.x-toolbar .x-btn-over .x-btn-left{ background:url(../images/default/toolbar/tb-btn-sprite.gif) no-repeat 0 0; } .x-toolbar .x-btn-over .x-btn-right{ background:url(../images/default/toolbar/tb-btn-sprite.gif) no-repeat 0 -21px; } .x-toolbar .x-btn-over .x-btn-center{ background:url(../images/default/toolbar/tb-btn-sprite.gif) repeat-x 0 -42px; }
I have been fighting with this for 3 hours and I can't figure it out. Help!
__________________
David Badke
Humanities Computing and Media Centre
University of Victoria, BC, Canada
David Badke
Humanities Computing and Media Centre
University of Victoria, BC, Canada
![Reply With Quote](http://extjs.com/forum/images/buttons/quote.gif)
#
2
![]() |
![]()
Old:
.next-btn { background-image: url('../images/next.gif'); } New: .next-btn .x-btn-text { background-image: url('../images/next.gif'); } ![]() |
#
3
![]() |
![]()
Thanks! That works perfectly.
__________________
David Badke Humanities Computing and Media Centre University of Victoria, BC, Canada ![]() |