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

7 posts, 1 answers
  1. Nicholas Walker
    Nicholas Walker avatar
    55 posts
    Member since:
    May 2006

    Posted 02 Mar 2010 Link to this post

    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
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Mar 2010 Link to this post

    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:


    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nicholas Walker
    Nicholas Walker avatar
    55 posts
    Member since:
    May 2006

    Posted 05 Mar 2010 Link to this post

    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;  
    }  
     
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 10 Mar 2010 Link to this post

    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.
  6. Nicholas Walker
    Nicholas Walker avatar
    55 posts
    Member since:
    May 2006

    Posted 10 Mar 2010 Link to this post

    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

  7. Answer
    Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 16 Mar 2010 Link to this post

    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.
  8. Nicholas Walker
    Nicholas Walker avatar
    55 posts
    Member since:
    May 2006

    Posted 16 Mar 2010 Link to this post

    Thank you - that is exactly what I needed.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017