Three IE issues with RadToolBar (with code)

12 posts, 0 answers
  1. Daniel
    Daniel avatar
    44 posts
    Member since:
    Nov 2007

    Posted 24 Apr 2008 Link to this post

    I have encountered three issues with RadToolBar, all demonstrated with the code below:

    1. In IE7 the RadToolBarDropDown is displayed shifted to the right. In Firefox the menu displays directly underneath dropdown but in IE7 it is too far to the right.

    2. RadToolBarButton does not self uncheck if specified as such (IE7 and Firefox). To uncheck you must click on it to check, then click again to "uncheck" and then click away from the toolbar (blur) to uncheck. Shouldn't it uncheck immediately after the second click on the checked button?

    3. As noted in a previous post, the RadToolBarDropDown menu, in IE7 , displays in "halves", you can see the effect in the code below.

    <%@ Page  
        Language="C#" 
        AutoEventWireup="true" 
        CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
        <head runat="server">  
            <title>RadToolBar Issues</title> 
        </head> 
        <body> 
            <form id="form1" runat="server">  
                <div> 
                    <asp:ScriptManager ID="scriptManager" runat="server">  
                    </asp:ScriptManager> 
                    <div style="float:left;">  
                        <telerik:RadToolBar  
                            ID="RadToolBar1" 
                            Skin="Web20" 
                            runat="server" 
                            Width="965px">  
                            <CollapseAnimation Duration="200" Type="OutQuint" /> 
                            <Items>             
                                <telerik:RadToolBarButton runat="server">  
                                    <ItemTemplate> 
                                        <asp:Label  
                                            ID="lblSearch" 
                                            runat="server" 
                                            Text="I am a label!" /> 
                                    </ItemTemplate> 
                                </telerik:RadToolBarButton> 
                                <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Text="Button 1" /> 
                                <telerik:RadToolBarDropDown runat="server" Text="Group Menu">  
                                    <Buttons> 
                                        <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Group="Group" Text="I like this menu" Checked="true" /> 
                                        <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Group="Group" Text="but in IE" Checked="false" /> 
                                        <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Group="Group" Text="it displays in halves" Checked="false" /> 
                                        <telerik:RadToolBarButton runat="server" CheckOnClick="true" AllowSelfUnCheck="true" Group="Group" Text="and too far to the right!" Checked="false" /> 
                                    </Buttons> 
                                </telerik:RadToolBarDropDown>                        
                            </Items> 
                        </telerik:RadToolBar> 
                    </div> 
                </div> 
            </form> 
        </body> 
    </html> 
     




  2. Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 25 Apr 2008 Link to this post

    Hi Daniel,

    I discussed point #2 in several forum posts (e.g. Disabled button / Inverted Hover Behavior post). It is fixed now and the bug will be removed in the first SP of the suite. In the meantime you can use the workaround I provided there:
    function onClientButtonClicking(sender, args)
        {
            args.get_item().get_element().className = args.get_item().get_element().className.replace(/rtbItemHovered /ig, "");
            args.get_item().blur();
            args.get_item().disable();

        }

    Up to #1 and #3 - I'm afraid I am missing something, as I was not able to reproduce these with the page you sent us (please, find the attached screenshots). Do you include some stylesheets to the page, that might affect the RadToolBar look?

    Kind regards,
    Erjan Gavalji
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    44 posts
    Member since:
    Nov 2007

    Posted 25 Apr 2008 Link to this post

    Hi Erjan,

    You're right, my apologies. It seems a lot of my issues are stemming from how my design's CSS interacts with the RadControls, obviously some elements cannot be nicely contained within a wrapper div to avoid the issues.

    At any rate at this style to the head of the example below and it will reproduce the two issues, the "halves"-like effect when the menu is displayed and the incorrect placement of the menu.

    I should be able to find a workaround in the design for this but it would be interesting to know why this tag effects the placement like it does.

            <style type="text/css"
                body 
                { 
                    text-align: center; 
                } 
            </style> 

  5. Daniel
    Daniel avatar
    44 posts
    Member since:
    Nov 2007

    Posted 25 Apr 2008 Link to this post

    Also, a quick note about the button fix, the code as is actually makes things worse, but removing the last line call to disable(); will fix the behavior as its described. The disable() method call was probably for the specific user's requirement in the post you referenced. This function just removes the stuck hover after you deselect a button.

        function onClientButtonClicking(sender, args) 
        { 
            args.get_item().get_element().className = args.get_item().get_element().className.replace(/rtbItemHovered /ig, ""); 
            args.get_item().blur(); 
        } 

  6. Daniel
    Daniel avatar
    44 posts
    Member since:
    Nov 2007

    Posted 25 Apr 2008 Link to this post

    Sorry to comment again but it appears your javascript workaround (minus the disable()) for the button issue is only working in Firefox, in IE the behavior is exactly the same. To be specific, this is the behavior:

    (prior to javascript fix)
    1. Click on button, it shows "Checked" state (in Web20 it's showing the box around the button plus the Checked image... I know that your fix wants to remove the box around the button (hover) but that's not necessary for me and it doesn't work well, so bare with me in this description)

    2. Click on buton, it shows "Unchecked" state with box around the button
    3. To remove the box around the button (hover) you have to move somewhere else (i.e., blur, like the javascript fix does)

    (after javascript)
    In Firefox, the expected behavior (or perhaps only my expected behavior) is shown, I see Checked when Checked, Unchecked when Unchecked, and hover disappears when I move the mouse away without having to manually click/blur in a new region.

    In IE there is no change in behavior.
  7. Daniel
    Daniel avatar
    44 posts
    Member since:
    Nov 2007

    Posted 25 Apr 2008 Link to this post

    Erjan,

    I filed a separate support ticket for the Button issues I'm describing here (with the fix applied) as I don't think I've done a good job of describing. The ticket has a reproduction showing that with your fix, FF works but IE doesn't. Without the fix, they both behave the same.

    Daniel
  8. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 28 Apr 2008 Link to this post

    Hello Daniel,

    Thank you for sending a demo project. We examined it and suggested a solution in the support ticket you started. If everything works as expected on your side, you can share the know-how in this forum thread.

    Thanks.

    Erjan
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. Patrick Stovall
    Patrick Stovall avatar
    22 posts
    Member since:
    Jan 2008

    Posted 02 May 2008 Link to this post

    Daniel,

    What was the resolution to this?

    I to am having the same problem and removing the text-align: center; didn't fix the problem.

    I'm hoping you came up with a solution.

    Thanks!
    pat.
  10. Daniel
    Daniel avatar
    44 posts
    Member since:
    Nov 2007

    Posted 02 May 2008 Link to this post

    Hi Patrick,

    For the issue related to text-align:center, I wasn't able to find a workaround other than removing that attribute and tweaking the design a little. Is your RadToolBar in a <div style="float:left;">? Likely there is a text-align:center or something similar higher up in your CSS selector hierarchy, possibly up in body{} or in one of your content divs?

    I'll try to help you with it, the first thing to do is trace back through your styles to see if you can find this.

  11. Daniel
    Daniel avatar
    44 posts
    Member since:
    Nov 2007

    Posted 02 May 2008 Link to this post

    Hello Erjan,

    The support ticket suggestions solved the issues. The issue with the text-align:center I got around by removing it.

    For others, here is the code that will result in a correct unfocus in IE7/FF:
    function OnClientButtonClicking(sender, args)  
    {  
        args.get_item().get_element().className = args.get_item().get_element().className.replace(/rtbItemFocused /ig, "");  
        args.get_item().blur();  
    }   

    The trick is to change the focused style, not the hovered style, when you blur on a click.

    Also if you're trying to set the selected item in a toolbar drop down to bold (or any other style, you need to include additional selectors):

    .bold .rtbWrap .rtbText  
    {  
        font-weight:bold !important;  
    }    

    This will set the style on the correct area of the drop-down. Using simply a class like .bold for CheckedCssClass will not override the style.

    Hope this helps!

  12. Remi
    Remi avatar
    38 posts
    Member since:
    Oct 2007

    Posted 25 Aug 2008 Link to this post

    Hello,

    We're experiencing issues 2 and 3. Thanks for opening the post Daniel and for your comments.

    The menu loads in halves under IE7.0 and to the right. We want it justified left under the Tab bar button that opens the drop down.
     
    In firefox 2.0, the drop down only shows half the menu, while the other half is cut off and doesn't appear at all.

    What was the work around to correct this functionality? We're using Q2 Ajax ASP.Net rad controls.

    Any assistance or resolution is greatly appreciated. I've been working with the CSS and float:left but to no resolve.

    Thanks.
  13. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 26 Aug 2008 Link to this post

    Hello Remi,

    Issue #2 is already fixed. Are you using the latest official version of Telerik.Web.UI? As for the other issue, It might be caused by some external css styles you incorporate in your page. Can you open a support ticket and send us a working sample which we could test locally?



    Kind regards,
    Peter
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017