Ribbonbar Template Item Size=Large

[Karl Maynard]

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...

[Shinu]

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.

[Karl Maynard]

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.

[Ivan Zhekov]

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