RadDock display error with IE

[sbinet]

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.

[Petio Petkov]

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.

[WRONG ACCOUNT]

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

[sbinet]

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.

[WRONG ACCOUNT]

sbinet,

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

Thanks,
Misty

[Pero]

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.

[WRONG ACCOUNT]

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-align: left;
}
.RadDock .rdCenter .rdCommands
{
    float: left !important;
}
.RadDock .rdTitleBar em
{
    float: right !important;
}

I changed it to this, as you recommended:

.RadDock .rdTitleBar
{
    text-align: left;
}
.RadDock .rdCenter .rdCommands
{
    float: left !important;
}
.RadDock .rdTitleBar em
{
    float: right !important;
    width: 100% !important;
}
.rdCommands
{
    position: absolute !important;
    left: 7px !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.

[Pero]

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.

[WRONG ACCOUNT]

Perfect! I replaced all of the CSS I was using with what you recommended and it works great. Thank you!