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

RibbonBarGroup Size

7 Answers 169 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 26 Oct 2011, 12:08 AM
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

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 28 Oct 2011, 10:52 AM
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.
0
Kate
Telerik team
answered on 28 Oct 2011, 12:53 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Jerry
Top achievements
Rank 1
answered on 28 Oct 2011, 04:03 PM
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
 
0
Kate
Telerik team
answered on 02 Nov 2011, 12:19 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Maikel
Top achievements
Rank 1
answered on 05 Feb 2013, 10:01 AM
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
0
Kate
Telerik team
answered on 08 Feb 2013, 10:54 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
JeffSM
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 02 Mar 2018, 04:43 PM

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

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

Tags
RibbonBar
Asked by
Jerry
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Kate
Telerik team
Jerry
Top achievements
Rank 1
Maikel
Top achievements
Rank 1
JeffSM
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or