Raddock Collapse/Expand and Close buttons

[Greg]

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 */

[Pero]

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