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

Ribbonbar Template Item Size=Large

3 Answers 75 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Karl Maynard
Top achievements
Rank 1
Karl Maynard asked on 01 Sep 2012, 08:10 PM
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...

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 03 Sep 2012, 05:51 AM
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.
0
Karl Maynard
Top achievements
Rank 1
answered on 03 Sep 2012, 06:09 AM
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.
0
Ivan Zhekov
Telerik team
answered on 03 Sep 2012, 10:57 AM
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.
Tags
RibbonBar
Asked by
Karl Maynard
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Karl Maynard
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Share this question
or