This is a migrated thread and some comments may be shown as answers.

RadDock display error with IE

8 Answers 84 Views
Dock
This is a migrated thread and some comments may be shown as answers.
sbinet
Top achievements
Rank 1
sbinet asked on 13 Mar 2010, 03:13 PM
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.

8 Answers, 1 is accepted

Sort by
0
Petio Petkov
Telerik team
answered on 16 Mar 2010, 03:28 PM
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.
0
WRONG ACCOUNT
Top achievements
Rank 1
answered on 04 May 2010, 07:05 PM
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
0
sbinet
Top achievements
Rank 1
answered on 05 May 2010, 04:18 AM
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.
0
WRONG ACCOUNT
Top achievements
Rank 1
answered on 05 May 2010, 08:40 PM
sbinet,

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

Thanks,
Misty
0
Pero
Telerik team
answered on 10 May 2010, 03:05 PM
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.
0
WRONG ACCOUNT
Top achievements
Rank 1
answered on 11 May 2010, 07:19 PM
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.
0
Pero
Telerik team
answered on 13 May 2010, 03:25 PM
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.
0
WRONG ACCOUNT
Top achievements
Rank 1
answered on 13 May 2010, 05:30 PM
Perfect! I replaced all of the CSS I was using with what you recommended and it works great. Thank you!
Tags
Dock
Asked by
sbinet
Top achievements
Rank 1
Answers by
Petio Petkov
Telerik team
WRONG ACCOUNT
Top achievements
Rank 1
sbinet
Top achievements
Rank 1
Pero
Telerik team
Share this question
or