Thickness of floating dock horizontal/vertical/both resize "grip"

[Nicholas Walker]

Hello,

I am working with floating raddock objects using a custom skin.  I am having trouble with the thickness of the "grip" that I can grab with the mouse to resize the dock window.  I would like to make it thicker - I do not see any obvious way in the stylesheet to do this.  It seems like your online demos have a thicker "grip" so it appears that this is possible.  Can you provide any guidance on how to do this?

Thanks,
--nick

[Pero]

Hello Nick,

You can change the height of the grip in the Dock.css of your custom skin. The default value is 10px. This is the CSS that needs to be modified:

.rdGripTop .rdLeft,
.rdGripTop .rdCenter,
.rdGripTop .rdRight
{
    height: 10px !important;
    font-size: 1px;
    line-height: 1px;
}

 
More information about creating a custom dock skin can be found on the following links:

• http://www.telerik.com/help/aspnet-ajax/dock_appearancetutorialcustomskin.html
• http://www.telerik.com/community/forums/aspnet-ajax/docking/using-old-custom-skins-with-raddock-q3-2009.aspx

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.

[Nicholas Walker]

So I tried this and it did not seem to change anything.  I tried changing the height setting to 40px and it appears to be the same width.  My style sheet def is below if that makes any difference.

/* Dock/rdHTitle.gif */

/* RadDock for ASP.NET AJAX MTCEditor Skin */

/* Docking Zone properties */
.RadDockZone_MTCEditor
{
    border-color: #616161;
}

/* wrappers and borders */
.RadDockZone_MTCEditor .rdPlaceHolder
{
    border-color: #616161;
}

.RadDock_MTCEditor
{
    /*background-color: transparent;*/
    background-color:#ffffff;
    color: #000;
}

.RadDock_MTCEditor .rdTopBorder,
.RadDock_MTCEditor .rdSideBorders,
.RadDock_MTCEditor .rdBottomBorder
{
    border-color: #ff0000;
}

/* titlebar and buttons */
.RadDock_MTCEditor .rdTitlebar
{
    border-color: #616161;
    background-color: #eaeaea;
    color: #000;
}

.RadDock_MTCEditor .rdContent
{
    position:relative;
    overflow: hidden !important;
}

.RadDock_MTCEditor .rdHTitlebar .rdTitle
{
    background-color: #e4e4e4;
}

.RadDock_MTCEditor .rdVTitlebar .rdTitle
{
    border-color: #ff0000 #ff0000 #ff0000 #ff0000;
    background-color: #ff0000;
}

.RadDock_MTCEditor .rdHTitlebar .rdCommands
{
    padding: 0 3px 0 0;
}

/* right to left support */
.RadDock_MTCEditor_rtl .rdHTitlebar .rdTitle
{
    padding-left: 0;
    padding-right: 10px;
}

.RadDock_MTCEditor_rtl .rdHTitlebar .rdCommands
{
    padding: 0 0 0 3px;
}

.RadDock_MTCEditor .rdHTitlebar .rdCommands a,
.RadDock_MTCEditor .rdVTitlebar .rdCommands a
{
    margin: 0 0 0 0;
}

.RadDock_MTCEditor .rdTitlebar .rdCommands a
{
    background-image: url('Dock/DockCommandSprites.gif');
}

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

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

.RadDock_MTCEditor .rdTitlebar .rdUnpin:hover
{
    background-position: -19px -38px;
}

.RadDock_MTCEditor .rdTitlebar .rdPin:hover
{
    background-position: -19px -57px;
}

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

.RadDock_MTCEditor .rdTitlebar .rdCustom:hover
{
    background-position: -19px -95px;
}

/* drag grips */
.RadDock_MTCEditor .rdGripTop .rdLeft,
.RadDock_MTCEditor .rdGripTop .rdCenter,
.RadDock_MTCEditor .rdGripTop .rdRight
{
    height: 40px !important;
    font-size: 1px;
    line-height: 1px;
    background: #ff0000;
}

.RadDock_MTCEditor .rdTopLeft,
.RadDock_MTCEditor .rdTopRight,
.RadDock_MTCEditor .rdBottomLeft,
.RadDock_MTCEditor .rdBottomRight,
.RadDock_MTCEditor .rdLeftMiddle,
.RadDock_MTCEditor .rdRightMiddle
{
    background: #ff0000;
}

.RadDock_MTCEditor .rdTopCenter,
.RadDock_MTCEditor .rdBottomCenter
{
    background: #ff0000;
}

[Pero]

Hi Nick,

Now that you sent your custom skin's CSS I see that you are not using the latest version of the RadDock control. That is why the grip looks thicker on our demo site than your local project. Please make sure you specify the version you are using  when opening a support ticket or creating a forum post. This way we know what version to use when testing and thus providing you the right solution.

To change the height of the grip you need to use the .rdGripTop selector (don't forget the !important flag) present in the Dock.css file. If you want to change the background-color of the grip use the .RadDock_MTCEditor .rdGripTop, .RadDock_MTCEditor .rdGripLeft selectors (in the Dock.CustomSkin.css file).

.rdGripTop
{
    top: 1px; /* brd */
    height: 10px !important;
}


/* drag grips */
.RadDock_MTCEditor .rdGripTop, .RadDock_MTCEditor .rdGripLeft
{
    background: Yellow;
}

I have attached the full source code of the project that I tested.

All the best,
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.

[Nicholas Walker]

Sorry - yes, we are still one version behind on the 2009 Q2 .NET 2.0 release.  Did not realize that the skin would change that dramatically in a single release.

So I have reviewed the project you sent me.  A couple of things:

1.  The main problem I think:  I am not trying to change the height of the "drag" grip for the window.  Correct me if I am wrong, but that appears to be what you are trying to do (the dock in your sample projet is not resizeable at all)?  I am trying to change the RESIZE grips on the right/bottom edges of the window.  I don't see how changing the parameters you have specified will do this.

2.  In the project you sent:  I don't see ANYTHING changing on the dock based on changing that height parameter you specified so I am not sure what I am supposed to be looking at.  On my dev box, it looks/behaves the same at 10px as it does at 50px or 100px. 

3.  Your project is using ASP.NET themes.  We don't do anything like this, so it would be helpful if you would send/use examples that demonstrate what we need to do without using themes.

Thanks,
--nick

[Petio Petkov]

Hello Nicholas Walker,

When RadDock is resizable it is wrapped in a table with the following css classes:

rdTopLeft	rdTopCenter	rdTopRight
rdLeftMiddle		rdRightMiddle
rdBottomLeft	rdBottomCenter	rdBottomRight

We use the cells as resize handlers. So if you want to change the resize handlers size, you should modify the css classes shown above, e.g.

<style type="text/css">
      .rdTopLeft
      .rdTopRight,
      .rdLeftMiddle,
      .rdRightMiddle,
      .rdBottomLeft,
      .rdBottomRight
      {
          width: 20px !important;

      }
      .rdTopLeft,
      .rdTopCenter,
      .rdTopRight,
      .rdBottomLeft,
      .rdBottomCenter,
      .rdBottomRight
      {
          height: 20px !important;
      }

  </style>

Let us know if you need any further assistance


Sincerely yours,
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.

[Nicholas Walker]

Thank you - that is exactly what I needed.