Right area of buttons not clickable

7 posts, 0 answers
  1. Andrew
    Andrew avatar
    8 posts
    Member since:
    Feb 2009

    Posted 10 Sep 2009 Link to this post

    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.

  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 15 Sep 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    8 posts
    Member since:
    Feb 2009

    Posted 16 Sep 2009 Link to this post

    Hi Martin,

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

  5. Martin
    Admin
    Martin avatar
    585 posts

    Posted 16 Sep 2009 Link to this post

    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.
  6. Andrew
    Andrew avatar
    8 posts
    Member since:
    Feb 2009

    Posted 16 Sep 2009 Link to this post

    Thanks, that worked a treat!
  7. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 08 May 2014 in reply to Martin Link to this post

    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
  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 12 May 2014 Link to this post

    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
     
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017