This is a migrated thread and some comments may be shown as answers.

Raddock Collapse/Expand and Close buttons

1 Answer 115 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 22 Dec 2010, 07:16 PM
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 */

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 23 Dec 2010, 08:44 AM
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.
Tags
Dock
Asked by
Greg
Top achievements
Rank 1
Answers by
Pero
Telerik team
Share this question
or