View Full Version : [CLOSED] Split button with gray theme and arrow align bottom, doesn't render correctly on hover

May 08, 2012, 4:24 PM

If I use the Gray theme and have a split button with arrow aligned to the bottom, when hovering over the button, the separator and arrow shift down. This does not happen with the Blue theme. Here's a full example:

<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<!DOCTYPE html>
<head id="Head1" runat="server">
<title>A simple button</title>
body { padding: 10px; }
<ext:ResourceManager runat="server" Theme="Gray" />
<form runat="server">
<ext:SplitButton runat="server" Text="Paste" ArrowAlign="Bottom" Width="64">
<ext:Menu runat="server">
<ext:MenuItem runat="server" Text="Paste Plain Text" />
<ext:MenuItem runat="server" Text="Paste with Merge" />
<ext:MenuSeparator runat="server" />
<ext:MenuItem runat="server" Text="Paste Special..." />

I can see the same problem on your examples explorer:

Go down to the section titled "Split Buttons (Arrow on bottom)"

I have compiled the latest code for Examples explorer from github and see it there, too.

May 08, 2012, 6:22 PM

Thanks for the report. I have reported it to Sencha.

Do you need it to be fixed as soon as possible or can it wait for a fix from ExtJS (if, certainly, they will confirm) ? If the first, we would investigate a possible fix.

May 08, 2012, 6:58 PM
Thanks for reporting it. I thought it was some custom Ext.NET css, but I've just looked at the CSS again and seen that it comes from Sencha's own theme. Sorry about that!

I am working around it for now using this CSS:

.x-btn-over .x-btn-split-bottom {
background-image: url("/extjs/resources/themes/images/gray/button/s-arrow-b-gif/ext.axd");

Basically instead of setting just s-arrow-bo-gif I am using the same one used without the hover: -b-gif

So no need to investigate a workaround, but thanks for the offer!

May 08, 2012, 7:31 PM
Thanks for sharing the workaround.

I will monitor the thread on Sencha and update the current one.

May 10, 2012, 2:59 PM
ExtJS team have considered it a bug as well.

May 10, 2012, 6:25 PM
Great. Thanks for the update. Hopefully they will sort it out soon but I will use the earlier workaround in the meanwhile. I'll add a comment in your bug report on Sencha to that effect.

May 10, 2012, 7:16 PM
Yes, I saw, thanks. Hopefully, they will fix in the next release.

Aug 27, 2012, 8:04 AM
The issue has been fixed by Sencha in ExtJS 4.1.1.

Respectively, it is within the Ext.NET 2.1 branch as well.

Thanks again for the report!