Ribbonbar Template Item Size=Large

4 posts, 0 answers
  1. Karl Maynard
    Karl Maynard avatar
    19 posts
    Member since:
    Apr 2005

    Posted 01 Sep 2012 Link to this post

    I am trying to add a ribbon bar group with one large button and two large templates. 

    My problem is that the templates items always seem to flow vertically like medium sized items, how do i define the template items to render like "large" buttons ??

                           
    <telerik:RibbonBarGroup Text="Timecard" Width="160px">
        <Items>
            <telerik:RibbonBarButton Size="Large" Text="Add Entry" ImageUrl="~/images/ribbonbaricons/upload.png"/>
            <telerik:RibbonBarTemplateItem Size="Large">
                <div style="border: solid 1px blue; height: 66px; width: 50px;">
                </div>
            </telerik:RibbonBarTemplateItem>
            <telerik:RibbonBarTemplateItem Size="Large">
                <div style="border: solid 1px blue; height: 66px; width: 50px;">
                </div>
            </telerik:RibbonBarTemplateItem>
        </Items>
    </telerik:RibbonBarGroup>

    I have tried with and without the width on the group, with and without Size on the template item, but nothing seems to work...

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Sep 2012 Link to this post

    Hi,

    Try the following CSS to achieve your scenario. Please make sure that you are using ImageUrlLarge instead of ImageUrl when the items Size is set to Large. Attached is the screenshot.

    CSS:
    <style type="text/css">
      .RadRibbonBar .rrbButtonArea
         {
           height: 240px !important;
         }
      .RadRibbonBar .rrbGroupTitle
         {
           bottom: -220px !important;
           position: relative !important;
         }
      .RadRibbonBar .rrbButtonGroupIn
         {
           height: 235px !important;
         }
      .RadRibbonBar > .rrbContentWrapOut
         {
           height: 265px !important;
         }
    </style>

    Please elaborate your scenario if it doesn't helps.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Karl Maynard
    Karl Maynard avatar
    19 posts
    Member since:
    Apr 2005

    Posted 03 Sep 2012 Link to this post

    Thanks for the reply, but i am trying to get the button and the two templates to be shown horizontally in large format e.g:

    +-----------+ +-----------+ +-----------+
    |           | |           | |           |
    | template  | | template  | |   button  |
    |           | |           | |           |
    +-----------+ +-----------+ +-----------+

    Even though i specify a width and height in the styles for the two templates, and/or have Size=Large on the ribbonbartemplate declaration they still render as if they were Size=Medium and i end up with the three templates rendering vertically.

    ...and I am only specifiy ImageURL because i use the CLIP mode for the images, where i understood i didnt need to specify the LargeImageUrl.
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 03 Sep 2012 Link to this post

    Hi, Karl.

    That there appears to be a bug and I have logged it.

    You could fix things very easily though, by using the ControlGroup element of the ribbon e.g.:

    <telerik:RadRibbonBar runat="server">
        <Tabs>
            <telerik:RibbonBarTab Text="Home">
                <telerik:RibbonBarGroup Text="Timecard" Width="160px">
                    <Items>
                        <telerik:RibbonBarControlGroup Orientation="Horizontal">
                            <telerik:RibbonBarButton Size="Large" Text="Add Entry" />
                            <telerik:RibbonBarTemplateItem Size="Large">
                                <div style="border: solid 1px blue; height: 66px; width: 50px;">
                                </div>
                            </telerik:RibbonBarTemplateItem>
                            <telerik:RibbonBarTemplateItem Size="Large">
                                <div style="border: solid 1px blue; height: 66px; width: 50px;">
                                </div>
                            </telerik:RibbonBarTemplateItem>
                        </telerik:RibbonBarControlGroup>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
        </Tabs>
    </telerik:RadRibbonBar>

    The control group will try to align its content either vertically or horizontally (in this case it's horizontally).

    Note: the ControlGroup element was introduced with 2012 Q2 so you might need to update your Telerik binaries in case you are using an older version.

    Regards,
    Ivan Zhekov
    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