Toolbar Button Outline

6 posts, 0 answers
  1. Lannity
    Lannity avatar
    5 posts
    Member since:
    Jul 2012

    Posted 08 Apr 2011 Link to this post

    I've noticed in Firefox 3.6.16 that after I click a noncheck button on the toolbar meant for single clicking purposes, an outline is formed around the button, and doesn't go away until I click somewhere else on the browser.  Is there a way to make it so the button doesn't stay outlined after I click it, so that it merely goes back to how it looked before it was clicked.  I've also noticed this doesn't happen in Internet Explorer.
  2. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 13 Apr 2011 Link to this post

    Hello Lannity,

    Do you reproduce the problem at our online examples:
    http://demos.telerik.com/aspnet-ajax/toolbar/examples/overview/defaultcs.aspx?

    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lannity
    Lannity avatar
    5 posts
    Member since:
    Jul 2012

    Posted 13 Apr 2011 Link to this post

    The problem gets reproduced in Firefox 3.6, but not in Internet Explorer.  I need this to function correctly in Firefox 3.6 because the user base interested in using your AJAX interface primarily uses Firefox. 

    Here's a link to a flash video file I made illustrating the problem right off your own demo site:  ToolBar Button Hover Issue
    I recorded the video off my desktop so that it focuses on the ToolBar demo.

    In it you'll see the buttons stay hover highlighted after being clicked, and the effect only goes away after having clicked in some other area of the browser window.
  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 15 Apr 2011 Link to this post

    Hello Lannity,

    Thank you for the additional information. It helped us to see the issue locally.
    One possible solution is to attach to the OnClientButtonClicked event and reset the button css class:

    <telerik:RadToolBar ID="radToolBarMenu"
    runat="server"
    Skin="Outlook"
    OnClientButtonClicked="buttonClicked">
       <Items>
            .........................
        <telerik:RadToolBarButton runat="server" Text="Internal">
            </telerik:RadToolBarButton>
       </Items>
    </telerik:RadToolBar>
     
     
    <script type="text/javascript">
        function buttonClicked(sender, args) {
        var itemCss = "rtbItem rtbBtn";
        args.get_item().get_element().className = itemCss;
        }
    </script>

    Hope this helps.

    Regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Lannity
    Lannity avatar
    5 posts
    Member since:
    Jul 2012

    Posted 15 Apr 2011 Link to this post

    How will this work with two state toggle buttons such as the second one from the left shown in the demo?  If I use the your provided code to reset the hover state of such a button, will it ensure that the state of the button (clicked/not clicked) stays the same?
  7. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 18 Apr 2011 Link to this post

    Hi Lannity,

    Please find bellow a better workaround:

    <telerik:RadToolBar ID="radToolBarMenu" runat="server" Skin="Outlook" OnClientButtonClicked="buttonClicked">
                <Items>
                   <telerik:RadToolBarButton runat="server" Text="Internal">
                   </telerik:RadToolBarButton>
                   <telerik:RadToolBarButton Text="Toggle button" CheckOnClick="true" Checked="true" AllowSelfUncheck="true" />
                </Items>
            </telerik:RadToolBar>
     
            <script type="text/javascript">
                function buttonClicked(sender, args) {
                        args.get_item().blur();
                }
            </script>

    Otherwise I logged the bug in our bug tracking system and our developers will look into it.

    Kind regards,
    Helen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017