Dock Title Bar Height

[zx10r]

Hello,

 

Is there a way to set the title bar height of the dock, i tried using a custom css class found in another thread but it does not seem to be working. 

Could it be overriden by the Skin set in appConfig?

 .CustomHeight .rdTop .rdLeft,
        .CustomHeight .rdTop .rdRight,
        .CustomHeight .rdTop .rdCenter
        {
            height: 80px;
        }
        /*overwirtes the original line-height of the Dock in order to fit the new titbar height*/
        .CustomHeight .rdTitleBar em
        {
            font: Arial;
            height: 50px;
            font-size: large;
        }

 

Thanks

[Marin Bratanov]

Hi,

Generally, the design of the RadDock control has its own titlebar height and we cannot guarantee that changing it will not cause any visual glitches.

Nevertheless, I would suggest a few ideas:

• use the Lightweight render mode and the elastic capabilities of the control: http://docs.telerik.com/devtools/aspnet-ajax/controls/dock/mobile-support/responsive,-adaptive-and-elastic-capabilities. The article shows how changing the font-size changes the dimensions of the dock and its titlebar proportionately.
• consider using the titlebar template: http://docs.telerik.com/devtools/aspnet-ajax/controls/dock/structure/dock/title-bar-template.
• use the Lightweight RenderMode and inspect the rendered HTML in the dev toolbar of the browser. This will show you the classes you can override. Here is a basic example you can start from
  
  

  .RadDock.customTitlebarHeight .rdTitleWrapper
  {
      height: 4em;
  }

  <telerik:RadDock ID="RadDock1" runat="server" RenderMode="Lightweight" CssClass="customTitlebarHeight" Title="I have a custom titlebar height"></telerik:RadDock>

As for setting this in appConfig—there is no built-in functionality that can do this. Considering that two of these approaches use CSS and optionally a control property for a specific CSS class, you can set those via an ASP Theme, however. 

Regards,

Marin Bratanov
Telerik by Progress

[zx10r]

Thanks for the reply, and i do agree that i could have some unexpected consequences. On a side note, i attached an image where the material rad dock skin and some others tend to not middle align the text in the title bar. Any idea on what could be done here?

[Marin Bratanov]

Hello,

The Material skin is green and what I see in the screenshot is grayish. Also, the Material skin is only available in the Lightweight RenderMode. Can you confirm this is what you are using?

<telerik:RadDock runat="server" ID="rd1" Title="the title" RenderMode="Lightweight" Skin="Material"></telerik:RadDock>

I also advise you review the following section of the documentation to troubleshoot such appearance issues: http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/skins-troubleshooting#incorrect-or-distorted-appearance.

Last but not least, if you are customizing the titlebar (via a template or by overriding the built-in CSS), you should inspect the HTML and write your own rules to match your needs.

Regards,

Marin Bratanov
Telerik by Progress

[zx10r]

So yes, i am was using a customized version of the material skin. But regardless of using the custom or embedded Material skin it still seems to be be not aligning the text correctly. Attached image is bellow and the code

 

<telerik:RadDock Title="Case Information" Font-Names="Verdana" ID="RadDock1" runat="server"
                                        Width="360px" EnableAnimation="true" Skin="Material" RenderMode="Lightweight" EnableEmbeddedSkins="true"
                                        EnableRoundedCorners="true" Resizable="false" DockHandle="TitleBar">
                                        <Commands>
                                            <telerik:DockExpandCollapseCommand />
                                        </Commands>

 

Thoughts? I seem to be having this problem on most Docks and can confirm that only the Classic Render Mode Silk skin seems to be aligning the text correctly in the middle.

[Marin Bratanov]

Hi,

This is not expected and it seems to work fine for me. I am attaching here a short video so you can see if I am missing something.

Can you confirm the following:

• you are using the latest version (R2 2016 SP1 at the time of writing)
• the page markup is valid
• the browser is not zoomed
• there are no stylesheets on the page

If you still cannot resolve this issue, I advise that you open a support ticket and send us a small sample we can run and observe the issue in order to help, because at this point I am only guessing.

Regards,

Marin Bratanov
Telerik by Progress

[zx10r]

After tons of digging it seems that some rogue css styles from my master page were affecting it. Problem was on my end.

 

Thanks