Title Bar Height

[Adam Heeg]

I am having a word wrapping issue in my Title Bar's on my rad docks.

I'm using custom skins, so I've played around a little with the background image and creating a custom titlebar template.

So far I cannot figure out how to make changing the height of the Title Bar work with the different elements being used in rendering the docks on the webpage.  My question is, is there a generic list of changes that need to be made in order to alter the height of the title bar?

Thanks.

[Bozhidar]

Hello Adam ,

Please, find attached raddockcusomtitleheight.zip  - a sample project showing how to have custom dock title height and in the same time to keep the original one. For that purpose I am applying to the Dock an additional CssClass property in order to cascade through it the new Dock title height. In the project is also included a  sample background image to fit the alternative height.

Attached is also customheight.gif showing the result form the attached sample code in the browser.

Please, let us know if that solution is suitable for you.

All the best,
Bojo
the Telerik team

[Adam Heeg]

Thank you for the quick reply Bojo.  The attached solution is helpful, but I am still having trouble with a few items.  My docks are docked and displayed vertically in a dockzone, which leads to problem one.

1)  When I change the height of the RadDock title bar the display area in the dockzone does not change, causing titlebars to lay on top of each other like cards.

then

2) Our custom skinning seems to be overwriting the background image for the title bar.  Three of us hacked together what we have now, and none of us is an expert on what we did!  How do we specify the background image for the title bar? 

Here is a sample of the ascx source code:

<telerik:RadDockLayout
    ID="RadDockLayout1"
    runat="server"
    OnLoadDockLayout="RadDockLayout1_LoadDockLayout"
    OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
 >
        <telerik:RadDockZone ID="rdZoneMain" runat="server" BorderStyle="None" MinHeight="40px"
            Width="100%">
        </telerik:RadDockZone>
</telerik:RadDockLayout>

Below is the style sheet I am using.  I have tried adding the new background image to the various TitleBar settings, but they are being overridden by the HorizontalSpriteNF.gif file as noted below. 

Here is current style sheet settings:

.RadDock_EPSS
{
   margin-bottom:12px;
}

.RadDock_EPSS .rdMiddle .rdLeft,
.RadDock_EPSS .rdMiddle .rdRight
{
    background-image: url(<%= WebResource("VerticalSprite.gif") %>);
}

.RadDock_EPSS .rdTop .rdLeft,
.RadDock_EPSS .rdTop .rdRight,
.RadDock_EPSS .rdTop .rdCenter,
.RadDock_EPSS .rdBottom .rdLeft,
.RadDock_EPSS .rdBottom .rdRight,
.RadDock_EPSS .rdBottom .rdCenter
{
    background-image: url(<%= WebResource("HorizontalSprite.gif") %>);
}

.RadDock_EPSS .rdCenter .rdCommands a span
{
    background-image: url(<%= WebResource("CommandSprite.gif") %>);
}

.RadDock_EPSS .rdMiddle .rdCenter,
.RadDock_EPSS .rdBottom .rdCenter
{

}


.RadDock_EPSS .rdContent
{
    color: #333333;
}

.RadDock_EPSS em
{
    color: #000;
}

.RadDock .rdTitleBar em
{
    font: normal normal 10px  Arial, Sans-serif;
    float: left;
    line-height: 25px;
    padding: 0;
    margin-top: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
   background-color:#D9F1FF;
   color:#333333;
   border-top:solid 1px #000000;
   border-bottom:solid 1px #000000;
}

.RadDock .rdTitleBar
{
   font-size:12px;
   font-family:Arial Sans-Serif;
}


.RadDock.rdCollapsed
{
   border-bottom:solid 1px #000000;
}

.RadDock .rdTable,
.RadDock .rdTable .rdLeft,
.RadDock .rdTable .rdCenter,
.RadDock .rdTable .rdRight
{
    border: 0;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    vertical-align: top;
}

.rdCollapse
{
    background-position: 0 0;
}

.rdCollapse:hover
{
    background-position: -19px 0;
}

.rdExpand
{
    background-position: 0 -19px;
}

.rdExpand:hover
{
    background-position: -19px -19px;
}

.rdClose
{
    background-position: 0 -76px;
}

.rdClose:hover
{
    background-position: -19px -76px;
}

.rdWarningEPSS
{
   background-position: 0px -38px !important;
}

.rdWarningEPSS:hover
{
   background-position: -19px -38px  !important;
}

.rdInfoEPSS
{
   background-position: 0px -114px  !important;
}

.rdInfoEPSS:hover
{
   background-position: -19px -114px  !important;
}

.rdGreyEPSS
{
   background-position: 0px -133px  !important;
}

.rdGreyEPSS:hover
{
   background-position: -19px -133px  !important;
}

[Bozhidar]

Hello Adam,

Please find attached raddockcusomheight.zip where the the first reported problem was fixed.
I am apply a special CssClass property when i want to have a Dock with a different height (marked in yellow):

<telerik:RadDock runat="server" ID="rd1" Visible="true" Title="Custom Title Height<br>Second Line"
                Width="300" Height="300" Top="20" Left="20" Skin="Black" CssClass="CustomHeight">
            </telerik:RadDock>

When you have that CSS Class in the code you will have a new class in the main wrapping element, which will be used to cascade through it and overwrite the base Dock settings:

<div style="height: 300px; width: 100%;" class="RadDock RadDock_Black CustomHeight" id="rd1">here comes the Dock content</div>

And now for the second issue: as I am not using a custom skin as you, I am putting the necessary CSS code in the head section of the document. It is necessary to use the !important rule in order to apply the new titlebar height settings, otherwise my changes will no take effect:

<head runat="server">
    <title></title>
    <style type="text/css">
        /*overwirtes the original height of the Dock*/
        .CustomHeight .rdTop .rdLeft,
        .CustomHeight .rdTop .rdRight,
        .CustomHeight .rdTop .rdCenter
        {
            background-image: url(WindowAltHeight.gif) !important;
            background-position: 0 0 !important;
            height: 40px !important;
        }
        /*overwirtes the original line-height of the Dock in order to fit the new titbar height*/
        .CustomHeight .rdTitleBar em
        {
            font: 12px/17px "Segoe UI" ,Arial,Sans-serif !important;
        }
        /*overwirtes the original height of the Dock in order to be applied when the Dock is in a Zone*/
        .RadDock.rdCollapsed.CustomHeight
        {
            height: 40px !important;
        }
    </style>
</head>

You could put that code in the head section of the document as I did, or you could put it in your custom CSS file. It will be good to use the important rule in order to overwrite the

You should be careful of two things:
1. The CSS class name: I am using CustomHeight and if you want to use another, you should change it it the code I have attached.
2. The name of the image, that should be applied for the new height titlebar - WindowAltHeight.gif - so, you should use the same, or if want another, you should  change it in the CSS code.

If you decide to put the new image in the sprite and not to use a separate image, you should specify its new position with the important rule. Let`s say that it will be placed in the bottom right part of the sprite, the ne positions should look similar:

.CustomHeight .rdTop .rdLeft,
.CustomHeight .rdTop .rdRight,
.CustomHeight .rdTop .rdCenter
 {
  background-image: url(WindowAltHeight.gif) !important;
  background-position: right bottom !important;
  height: 40px !important;
 }

If you are still experiencing any problems, please, send us sample project wit your custom skin included (css, sprites etc.) and we will do our best to help you with applying the new height.

All the best,
Bojo
the Telerik team

[Adam Heeg]

Bojo, thanks for the quick response again.  We were able to get it to work with your sample code and suggestions.

The docks looks fantastic again!