RibbonBarGroup Size

7 posts, 0 answers
  1. Jerry
    Jerry avatar
    4 posts
    Member since:
    Jul 2010

    Posted 25 Oct 2011 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Oct 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 28 Oct 2011 Link to this post

    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
  5. Jerry
    Jerry avatar
    4 posts
    Member since:
    Jul 2010

    Posted 28 Oct 2011 Link to this post

    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
     
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 02 Nov 2011 Link to this post

    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
  7. Ann
    Ann avatar
    2 posts
    Member since:
    Mar 2011

    Posted 05 Feb 2013 Link to this post

    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
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Feb 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017