RadDock display error with IE

9 posts, 0 answers
  1. sbinet
    sbinet avatar
    7 posts
    Member since:
    Sep 2008

    Posted 13 Mar 2010 Link to this post

    Dear friends,

    I am using RadDock control (2009 Q3) together with theme of Asp.net. I am using a custom skin (modified from Telerik skin) for this dock. Everything works fine with FireFox, SeaMonkey... but shows error with IE 8 (as seen in the attached picture).

    I have thought of css conflicts between the dock css file and my custom css files (because I have some .css files in the theme folder), so I have tried to delete all my custom .css files. It means my page has no custom css file now, but the display error still exists. I really cannot think of where the error comes from.

    Could you suggest any ideas of this error.

    Thank you.
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 16 Mar 2010 Link to this post

    Hello sbinet,

    It seems that something with the commands goes wrong, but I can't tell you for sure what it is.
    Please paste your skin code in the thread or provide us with a live Url, where we can observe the problem.

    All the best,
    Petio Petkov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. WRONG ACCOUNT
    WRONG ACCOUNT avatar
    8 posts
    Member since:
    Apr 2010

    Posted 04 May 2010 Link to this post

    I'm having the same issue. It seems that when the page loads at a certain width, and then you adjust the page's width, the Dock isn't resizing properly. The "bubbles" in sbinet's screenshot appears to be coming from the image specified in the compiled css. See attached image.

    Looking at it in FireFox using Firebug, it seems that a width is being specified on the em element when it renders, but when the page is resized, that width is not changing. Here is the HTML from Firebug for the dock:

    <div style="width: 100%;" class="RadDock RadDock_Telerik " id="ctl00_MainContentPlaceHolder_GeneralInformationDock"
                <table class="rdTable"
                    <tbody><tr class="rdTop"
                        <td class="rdLeft" unselectable="on">&nbsp;</td> 
                        <td class="rdCenter"><div class="rdTitleBar" id="ctl00_MainContentPlaceHolder_GeneralInformationDock_T"
                            <em style="width: 1189px;">General Information</em><ul class="rdCommands"><li><a title="Collapse"><span class="rdCollapse">&nbsp;</span></a></li></ul
                        </div></td
                        <td class="rdRight" unselectable="on">&nbsp;</td> 
                    </tr> 
                    <tr class="rdMiddle"
                        <td class="rdLeft" unselectable="on">&nbsp;</td> 
                        <td class="rdCenter" style="height: auto;"><div class="rdContent" id="ctl00_MainContentPlaceHolder_GeneralInformationDock_C"
                             
                     
                        </div></td
                        <td class="rdRight" unselectable="on">&nbsp;</td> 
                    </tr> 
                    <tr class="rdBottom"
                        <td class="rdLeft" unselectable="on">&nbsp;</td> 
                        <td class="rdCenter" unselectable="on">&nbsp;</td> 
                        <td class="rdRight" unselectable="on">&nbsp;</td> 
                    </tr> 
                </tbody></table
                <input type="hidden" name="ctl00_MainContentPlaceHolder_GeneralInformationDock_ClientState" id="ctl00_MainContentPlaceHolder_GeneralInformationDock_ClientState" value="{&quot;Top&quot;:0,&quot;Left&quot;:0,&quot;DockZoneID&quot;:&quot;ctl00_MainContentPlaceHolder_RadDockZone1&quot;,&quot;Collapsed&quot;:false,&quot;Pinned&quot;:false,&quot;Resizable&quot;:false,&quot;Closed&quot;:false,&quot;Width&quot;:&quot;100%&quot;,&quot;Height&quot;:null,&quot;ExpandedHeight&quot;:0,&quot;Index&quot;:0}" autocomplete="off"
    </div> 

    The code from my page looks like this:

        <telerik:RadDockLayout ID="DockLayout" runat="server"
            <telerik:RadDockZone runat="server" ID="RadDockZone1" Orientation="Horizontal"
                <telerik:RadDock ID="GeneralInformationDock" runat="server" Title="General Information" 
                    DefaultCommands="ExpandCollapse" Width="100%" EnableDrag="false"
                    <ContentTemplate> 
                    </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
        </telerik:RadDockLayout> 

    What can I do to prevent this issue?

    Thanks,
    Misty
  5. sbinet
    sbinet avatar
    7 posts
    Member since:
    Sep 2008

    Posted 04 May 2010 Link to this post

    Hi Misty Fowler,

    In my case, I am using custom themes, and custom css file for RadDock. The error occurs only with IE, but work fine with FireFox.

    I have tried to add 
    RadStyleSheetManager, and set EnableStyleSheetCombine="true", and that fixes the problem:

    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" EnableStyleSheetCombine="true" >
    </telerik:RadStyleSheetManager>

    Hope this help with your case.
  6. WRONG ACCOUNT
    WRONG ACCOUNT avatar
    8 posts
    Member since:
    Apr 2010

    Posted 05 May 2010 Link to this post

    sbinet,

    Thank you for your reply. I tried your solution of setting EnableStyleSheetCombine, but that did not change anything.

    Thanks,
    Misty
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 10 May 2010 Link to this post

    Hi Misty,

    If the width of the docks (or the width of the dock zones) is specified in percent values, then there might be some visual glitches - since the dock has been designed for fixed layout (its width and height should be specified in pixels). Please use either of the following approaches, if this your case:

    • Follow this article from our Knowledge Base
    • Apply the following CSS to the page containing the docks:
      <style type="text/css">
          .rdTitleBar EM
          {
              width: 100% !important;
          }
          .rdCommands
          {
              position: absolute !important;
              right: 7px !important;
          }
      </style>

    Kind regards,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. WRONG ACCOUNT
    WRONG ACCOUNT avatar
    8 posts
    Member since:
    Apr 2010

    Posted 11 May 2010 Link to this post

    Thank you, Pero. That sort of fixes the problem, but it creates a new one. I need the Expand/Collapse icon to be on the left, with the Title Bar just to the right of it. I had this CSS in there already:
    .RadDock .rdTitleBar 
        text-alignleft
    .RadDock .rdCenter .rdCommands 
        floatleft !important; 
    .RadDock .rdTitleBar em 
        float: right !important; 

    I changed it to this, as you recommended:
    .RadDock .rdTitleBar 
        text-alignleft
    .RadDock .rdCenter .rdCommands 
        floatleft !important; 
    .RadDock .rdTitleBar em 
        float: right !important; 
        width: 100% !important; 
    .rdCommands 
        positionabsolute !important; 
        left7px !important; 

    That moves the Expand/Collapse icon to the right, where it is by default. If I remove the .rdCommands left positioning, then the Title is partially hidden by the icon, and if I remove the entire .rdCommands part, the funky "bubbles" show up again, without even resizing.
  9. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 May 2010 Link to this post

    Hi Misty,

    You can still move the commands to the left, and the title just to right of them, with some small changes to the CSS. Here is one way to do this:

    <style type="text/css">
        .rdTitleBar EM
        {
            width: 100% !important;
            padding-left: 45px !important;
        }
        .rdCommands
        {
            position: absolute !important;
            left: 7px !important;
        }
    </style>

    And the full source code of the project:
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .rdTitleBar EM
            {
                width: 100% !important;
                padding-left: 45px !important;
            }
            .rdCommands
            {
                position: absolute !important;
                left: 7px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            </Scripts>
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


    Kind regards,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  10. WRONG ACCOUNT
    WRONG ACCOUNT avatar
    8 posts
    Member since:
    Apr 2010

    Posted 13 May 2010 Link to this post

    Perfect! I replaced all of the CSS I was using with what you recommended and it works great. Thank you!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017