[FIXED] Hovering over a SplitButton shows a weird colored line

[W1cK8]

Hello,

I've noticed a small problem: if the Slate theme is active, hovering over a SplitButton will show a weird colored (cyan) horizontal line, but only when the SplitButton is inside a ToolBar (I think).

An example: http://www.extjs.com/examples/#basictoolbar. Hovering over the second button should show the problem.

An anti-example: http://www.extjs.com/examples/#buttons (scroll down to the SplitButton examples). Here the problem doesn't show up. The difference might be that example one has a SplitButton inside a ToolBar, while example two does not.

Searching for a reason showed me: the actual image that gets used, is s-arrow-o.gif from the default theme instead of the Slate one.

If you only use the Slate theme, a temporary workaround/quickfix is to copy <gxt-resources>/themes/slate/images/slate/button/s-arrow-o.gif to <gxt-resources>/images/default/button/s-arrow-o.gif. Now the problem will not be Slate's, but the default theme's .

I've seen this happen in IE 7, FF 3.5, and Safari 4, all on Windows.

I'm pretty sure it has something to do with the Slate css not overriding the default css, but can't really figure out the css.

When I have more time, I'll try to figure it out. In the meantime, maybe someone already has the solution.

[W1cK8]

I might have found something to solve this. The xtheme-slate.css file from GXT 2.1.0, line 97 states:

.x-btn-over .x-btn-mc em.x-btn-split, .x-btn-click .x-btn-mc em.x-btn-split, .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-btn-pressed .x-btn-mc em.x-btn-split {
background-image:url(../images/slate/button/s-arrow-o.gif);
}


There's a whole lotta style applied, but not when the button is inside a toolbar. So when changing this part to

.x-btn-over .x-btn-mc em.x-btn-split, .x-btn-click .x-btn-mc em.x-btn-split, .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-btn-pressed .x-btn-mc em.x-btn-split,
.x-toolbar .x-btn-over .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-click .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-menu-active .x-btn-mc em.x-btn-split, .x-toolbar .x-btn-pressed .x-btn-mc em.x-btn-split {
background-image:url(../images/slate/button/s-arrow-o.gif);
}

then it does work. The change being: take all the css qualifiers and add .x-toolbar to every part. Since I'm not really an expert on how these styles apply, I'm not sure this isn't overkill or doesn't introduce any side effects.

[darrellmeyer]

This bug is fixed in the releases/2.1 branch and is now available in the 2.1.1-beta release available here.