PDA

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



anup
May 08, 2012, 4:24 PM
Hi,

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>
<html>
<head id="Head1" runat="server">
<title>A simple button</title>
<style>
body { padding: 10px; }
</style>
</head>
<body>
<ext:ResourceManager runat="server" Theme="Gray" />
<form runat="server">
<ext:SplitButton runat="server" Text="Paste" ArrowAlign="Bottom" Width="64">
<Menu>
<ext:Menu runat="server">
<Items>
<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..." />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
</form>
</body>
</html>


I can see the same problem on your examples explorer:

http://examples2.ext.net/#/Buttons/Basic/Variations/
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.

Daniil
May 08, 2012, 6:22 PM
Hi,

Thanks for the report. I have reported it to Sencha.
http://www.sencha.com/forum/showthread.php?203086

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.

anup
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!

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

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

Daniil
May 10, 2012, 2:59 PM
ExtJS team have considered it a bug as well.
http://www.sencha.com/forum/showthread.php?203086

anup
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.

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

Daniil
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!