Right area of buttons not clickable

[Andrew]

I have a button skin with a prominently rounded edge (padding-right: 14px). This portion of the button does not respond to clicks. This seems to affect all skins and I have replicated it with the default skin (although it is much less noticeable as it has less padding).

I am using RAD Controls Q2 in IE8 and IE8 with the IE7 compatibility meta tag.

[Martin]

Hi Andrew,

During the process of skinning, we wrap the real button in a <a /> tag and apply background images both to it and to the button. However, we do not add programmatic click to the button from its parent link, because we considered that the clickable are is too narrow (in our skins it is 4 pixels) and would not need clicking. However, in your custom skin you've god and bigger padding, and you may use jQuery loop through <a /> tags with class name .rfdSkinnedButton and to attach a function that programmatically clicks the button inside these elements.

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andrew]

Hi Martin,

This is pretty much what I suspected. Thanks for the info, I'll take a look at the jQuery method.

[Martin]

Hi Andrew,

You may try this jQuery approach to click programmatically the buttons inside a .rfdSkinnedButton class:

<script type="text/javascript">
window.setTimeout(function(e)
{
   $(".rfdSkinnedButton").bind("click", function(e){
   this.childNodes(0).click();
});
}, 500);
</script>

* I did not use the jQuery $(document).ready(), because it is executed before RadFormDecorator while the elements with the class in question still do not exist in the DOM.

Regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andrew]

Thanks, that worked a treat!

[Charles]

Some of the skins (see the "Glow" skin)  result in areas of the button that are not clickable that are much bigger than 4px. This is causing problems for or users who are reporting that the button "only works some of the time". What is happening is that the button only posts back if you click the text. Click anywhere outside of the text and you don't get a postback. I tried adding the script above but a js error "function expected" is thrown when the button is clicked. The error occurs at the line this.childNodes(0).click();. My buttons are in a RadAjaxPanel. Any suggestions to make the entire button clickable?

Thanks

Charles

[Danail Vasilev]

Hello Charles,

You can use the following code that has a slightly modification to the one provided before.

<script type="text/javascript">
    function pageLoad() {
        $(".rfdSkinnedButton").bind("click", function (e) {
            this.childNodes[0].click();
        });
    }
</script>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Glow" />
<asp:UpdatePanel ID="Updatepanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" Text="text" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

Generally when you use AJAX it is best to use the Sys.Application.load() event(i.e., pageLoad is its shortcut), in order to ensure that the script controls on your page have already been loaded.

Regards,
Danail Vasilev
Telerik