Dock margin not showing

[Gabriel Beauchamp]

Hello, I just updated to the May 15th, 2008 release and the Dock margins do not appear in both IE7 and FireFox. Here is my CSS:

.RadDock_customSkin
{
    margin:0 0 15px;
}

Basically, I only want a 15px bottom margin in between Docks.

It was working fine with the older release. What seems to be the problem with this new release? It also seems that in the demo, the embedded Skins do not show the Dock margins.

Thanks,

[-DJ-]

Hi Gabriel,

I can't get any margins working between the docks either.

The temp solution I'm currently using is:

.RadDock_customSkin
{
    border-bottom: solid 15px transparent
}

It works, although it might not be ideal.

Regards,
-DJ-

[Svetlina Anati]

Hi guys,

You can apply the desired style by using inline declaration as shown below:

  <telerik:RadDock ID="RadDock1" style="margin-bottom:15px !important "  runat="server" Height="200">
        </telerik:RadDock>

Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Andrew Chandler]

Is this going to be fixed to work with the style sheet in a custom skin?

[Svetlina Anati]

Hi Andrew,

The provided code sets a margin to the RadDock and it is declared inline with the keyword !important which means that it should have the highest priority and will work with a custom skin, too. You can also put the setting in the skin and in this case it will not be necessary to override it with this code.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Kessler]

Hello,

I too had this problem.  I was able to apply this directly to the control but could not do this in the skin.  I Tried adding it by doing the following but it did not work:  How would I go about adding this to the skin

.RadDock_mySkin
{
   margin-bottom:10px !important;
}

Thanks,

Michael

[Sophy]

Hi Michael,

RadDock's embedded base stylesheet - Dock.css contains dock's margin setting as well and it is loaded from the Telerik.Web.UI dll. If you add your custom skin reference between the head tags of the page dock's embedded base stylesheet will be loaded after your custom skin css file and it will override your setting. The easiest way to resolve the problem is to add the custom skin reference after the RadDock control (inside the body of the page). For your convenience I have attached a sample project which demonstrates how to achieve the explained above.

Best wishes,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Andrew Chandler]

My only real issue with this, is that it breaks theming.  So my question again will be when will this be fixed int he control?

[Sophy]

Hi Andrew,

We understand the inconvenience that this css setting in the RadDock's base stylesheet file causes. We entered this issue in our requests list and will do our best to resolve this shortcoming for one of the next updates of the control.

All the best,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[John Billiris (JSBBS)]

Telerik,

Any update on the fix ?

[Obi-Wan Kenobi]

You should set EnableEmbeddedBaseStylesheet="false" and the Dock.css file will not be outputed to the client.

[reverland]

EnableEmbeddedSkins="false" does not work. And to top it off the base style has the !important in it. This has been an issue for some time, when will the fix be coming out?

[Obi-Wan Kenobi]

The EnableEmbededSkins property works, but you should set it to RadDockLayout, RadDockZone and RadDock. The same is for EnableEmbeddedBaseStylesheet.
If you have troubles with the !important in the base skin file you should set EnableEmbeddedBaseStylesheet = false and create your own base skin file.

[reverland]

That's how my code was set up before, it has that option set in all three. Since the release of 2009 it caused these issues, I also upgraded to sp1 before posting that this behavior is not fixed. The only way I was able to fix this was to compile a version of the DLLs myself and in that modified version I edited the base css for dock and took out all of the !important in it so it would take what I overwrote in my custom skin. Not really an easy or quick method to fix this issue that seems like it would be a simple fix.

[Obi-Wan Kenobi]

The easiest way to override base css classes is to put new declaration after all RadDocks and RadDockZones, e.g.

<%@ register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" >
            <telerik:RadDockZone ID="RadDockZone1" runat="server"  Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Skin="WebBlue" Text="aaa" Resizable="true">
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
        <style type="text/css">
        .rdWrapTable .rdTopBorder,
        .rdWrapTable .rdCenter,
        .rdWrapTable .rdContent
        {
            border: 5px solid red !important;
            top: 5px !important;
        }
        </style>
    </div>
    </form>
</body>
</html>

Hope it helps.

[reverland]

Instead of hacking my app, I would rather it work like it used to. As I said I fixed it by recompiling and taking out the !important, but I don't know how that compares with others skill levels.