RibbonBarGroup Size

[Jerry]

I have a RadRibbonBar inside a CommandItemTemplate of a RadGrid.  The bar items are RibbonBarTemplateItem.  I'm trying reduce the height of the RibbonBarGroup to the size of the controls it contains - the 'Height' property on the group doesn't reduce the height.  The RibbonBarGroup appears to be a fixed height - 3 rows in height.  How do I reduce the size of the group?

The RibbonBarTemplateItem contains a <table> with one row.

Here's the first group:

<CommandItemTemplate>
                       <div>
                           <telerik:RadRibbonBar ID="_ribbonBarComputers" runat="server">
                               <telerik:RibbonBarTab Text="Computer" >
                                   <telerik:RibbonBarGroup Text="Add/Update" >
                                       <Items>
                                           <telerik:RibbonBarTemplateItem Size="Small">
                                               <table>
                                                   <tr>
                                                       <td>
                                                           <telerik:RadTextBox ID="_ctrlAltirisText" runat="server" Width="300px" EmptyMessage="Paste Altiris text">
                                                           </telerik:RadTextBox>
                                                       </td>
                                                       <td>
                                                           <telerik:RadButton ID="_btn_AddComputer" runat="server" Text="Add" CommandName="AddComputer">
                                                           </telerik:RadButton>
                                                       </td>
                                                       <td>
                                                           <telerik:RadButton ID="_btn_ReplaceComputer" runat="server" Text="Replace" CommandName="ReplaceComputer">
                                                           </telerik:RadButton>
                                                       </td>
                                                       <td>
                                                           <telerik:RadButton ID="_btn_CloseComputer" runat="server" Text="Close" CommandName="CloseComputer">
                                                           </telerik:RadButton>
                                                       </td>
                                                   </tr>
                                               </table>
                                           </telerik:RibbonBarTemplateItem>
                                       </Items>
                                   </telerik:RibbonBarGroup>

Jerry

[Shinu]

Hello Jerry,

Try the following CSS to change the height of the RibbonBarGroup.
CSS:

<style type="text/css">
.RadRibbonBar .rrbButtonGroupIn
{
  height:60px !important;
}
</style>

Thanks,
Shinu.

[Kate]

Hello Jerry,

In general the height of the RadRibbonBar control is fixed. Therefore I would not recommend that you alter it, however if you explicitly set it in the way that Shinu has suggested it will change the height of the Group but we would not suggest this approach since you could encounter different issue with the control later. For example you might have issues with the layout of the buttons and/or the groups in the tabs. 

All the best,
Kate
the Telerik team

[Jerry]

Shinu/Kate,

I changed the height in the css to 40px and that brought the group Text to where I need them.  The ribbon group area and the group 'box' is still the same height.  Is there a way to change the height of the group area and the group box also?

I really like the look of the ribbon bar - it groups functions well and for our application is intuitive.  For our app, though, it makes for some unused space.  I would like to try to make it work.  I do understand your recommendations - if it causes problems I'll probably change to a TabStrip.

Thanks,

Jerry
 

[Kate]

Hello Jerry,

One way I could think of would be to have the RadRibbonBar control wrapped in a div tag and set height and overflow:hidden to this div. Thus you can show only as many pixels of the RadRibbonBar control as desired. Below you can find an example:

<style type="text/css">
.ribbon {
    height: 60px;
    overflow: hidden;
}
    </style>

 
markup:

<div class="ribbon">
        <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" Skin="Windows7" Width="500">
            <telerik:RibbonBarTab Text="Plan Functions">
                <telerik:RibbonBarGroup Text="Drawing Size">
                    <Items>
                        <telerik:RibbonBarButton Size="Medium" Text="Zoom Out" ImageUrl="../images/Cut.png">
                        </telerik:RibbonBarButton>

                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
        </telerik:RadRibbonBar>
    </div>

All the best,
Kate
the Telerik team

[Maikel]

Hi Kate,

This works great, only not if you have a ribbonbarmenu
The items in the menu are not visible anymore.
We have overflow=hidden and added following style:
    <style type="text/css"> .RadRibbonBar .rrbButtonGroupIn {     height:83px !important; } </style>

But we still want to show the menuitems. How can we do that ?

Ann

[Kate]

Hi Ann,

Can you please provide more details on your scenario? For instance it would be very helpful if you can clarify what you are to achieve, what you are getting and what you your current code of the RadRibbonBar control. Thus I could be able to test it locally and help you out in the most efficient way. 

All the best,
Kate
the Telerik team

[JeffSM]

I needed a bigger group, do I add this css:

.RadRibbonBar .rrbButtonGroupIn { height:86px !important; }
.RadRibbonBar .rrbGroupTitle {margin-top:16px !important;}