Raddock Collapse/Expand and Close buttons

2 posts, 0 answers
  1. Greg
    Greg avatar
    22 posts
    Member since:
    Aug 2010

    Posted 22 Dec 2010 Link to this post

    When we decrease the width of the window in Firefox, the collapse/expand and close buttons are being forced to the line below the titlebar. I think this has to do with the fact that the title itself is now its own element. Once the collapse/expand buttons hit that element in Firefox, the buttons get forced to the next line. Prior to the latest telerik update, the title and buttons were contained within the same element so they blended together when resizing the window. How to resolve this? It's like I have to set the minimum width of the titlebar but that isn't working in firefox. It just keeps decresing in width beyond the set width.

    /* START RadDock_Office2007 styles */
      
    .RadDock_Office2007 .rdTop .rdLeft,
    .RadDock_Office2007 .rdTop .rdRight
    {
        background-image: url('../images/Brand/DashboardHorizontalSprite.gif') !important;
    }
      
    .RadDock_Office2007 .rdTop .rdCenter
    {
        background-image: url('../images/Brand/DashboardVerticalSprite.gif') !important;
    }
      
    .RadDock_Office2007 .rdTitleBar em
    {
        line-height:25px !important;    
        color:#15428B !important;
        font-family:Tahoma,verdana,arial !important;
        font-size:11px !important;
        font-style:normal !important;
        font-variant:normal !important;
        font-weight:bold !important;
        text-align:left !important;
        width:auto !important;
    }
      
    .RadDock_Office2007
    {
        margin: 0px 0px 5px 0px !important;
    }
       
    /* END RadDock_Office2007 styles */
      
      
    /* START RadDock styles */
      
     .rdContent
    {
        font-family:Tahoma,verdana,arial !important;
        font: 11px Tahoma,verdana,arial !important;
    }
      
    .RadDock .rdTable .rdMiddle .rdCenter .rdContent
    {
        font: 11px Tahoma,verdana,arial !important;
        font-family:Tahoma,verdana,arial !important;
    }
      
      
    .RadDock .rdCommands .rdCollapse{background:url('../images/changeclienttup.gif') transparent !important;}
    .RadDock .rdCommands .rdExpand{background:url('../images/changeclientt.gif') transparent !important;}
    .RadDock .rdCommands .rdClose{background:url('../images/close.gif') transparent !important;}
      
    div.RadDock .rdTop .rdCenter {
        background-position: 0px 0px !important;
        background-repeat: repeat-x !important;
        width: 100% !important;
    }
      
    div.RadDock .rdTop .rdLeft
    {
        background-position: 0px 0px !important;
    }
      
      
    div.RadDock .rdTop .rdRight 
    {
        background-position: -6px 0px !important;
    }
      
      
    div.RadDock .rdMiddle .rdRight 
    {
        background-position: 4px 0px !important;
        background-color: #FFFFFF !important;
    }
      
      
    .RadDock .rdBottom .rdLeft,
    .RadDock .rdBottom .rdCenter,
    .RadDock .rdBottom .rdRight
    {
        background-position: 0 -101px !important;
        height: 1px !important;
    }
      
      
    .RadDock .rdTop .rdLeft, 
    .RadDock .rdTop .rdRight,
    .RadDock .rdMiddle .rdLeft, 
    .RadDock .rdMiddle .rdRight,
    .RadDock .rdBottom .rdLeft, 
    .RadDock .rdBottom .rdRight
    {
        width: 5px !important;
    }
      
    .RadDock .rdTop
    {
        height: 27px !important;
    }
      
    .RadDock .rdTable .rdTop
    {
        line-height:25px !important;    
    }
      
    .RadDockZone
    {
        position:relative !important;
    }
      
    .RadDockZone#RadDockZoneV1
    {
        padding: 0px 0px 0px 0px !important;
        margin: 10px 0px 0px 10px !important;
    }
      
    .RadDockZone#RadDockZoneV2
    {
        padding: 0px 0px 0px 0px !important;
        margin: 10px 0px 0px 10px !important;
    }
      
    .RadDockZone#RadDockZoneV3
    {
        padding: 0px 0px 0px 0px !important;
        margin: 10px 10px 0px 10px !important;
    }
      
      
    /* END RadDock styles */
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 23 Dec 2010 Link to this post

    Hi Greg,

    I suppose the width of the Dock is specified in percents, and that's why after resizing the commands are pushed on the next line. The RadDock control is designed for fixed layout, and its dimensions should be specified in pixels. However if you plan on using percentage values, you should apply the following CSS to the page containing the docks:

    <style type="text/css">
        .rdCommands, .RadDockZone .rdCommands
        {
            position: absolute !important;
            right: 7px;
        }
        .rdCommands
        {
            right: 3px;
        }
    </style>


    Regards,
    Pero
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top