Positioning of buttons inside toolbar

[Simón]

Hi,

I would like advice on how to make a toolbar that looks like the example in the image.

What I want is to have a RadToolBar in the top of a page, with width=100%, a few buttons to the left of the bar and a single button aligned to the right.

I've experimented with some properties of the buttons and with a little of custom cssclasses for the buttons, but didn't come to a solution.

Thanks for any help.

Simón de Lizarza

[Shinu]

Hello Simon,

You can set the width for the RadToolBarButtons in percentage according to your requirement.

ASPX:

<telerik:RadToolBar ID="RadToolBar2" runat="server" Width="100%">
    <Items>
        <telerik:RadToolBarButton runat="server" Text="Home" Width="90%">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton ImageUrl="~/Images/Button1.gif" runat="server">
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

-Shinu.

[Simón]

It worked for you? I reproduced your code, but the width of the first button is the width of the text of the button.

Besides, if it worked, the button would occupy 90% of the toolbar, but I want his width to be only the necessary to show the text. What I need is only the space between the buttons, not changing the size of any button.

Thanks,

Simón de Lizarza

[Yana]

Hi Simón,

Please download the attached simple page which demonstrates the needed layout.

Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Simón]

Hi Yana,

Thanks for the code, it works perfectly, but only for normal buttons.

I tried to use your code with a button with an item template. In this case the "item.get_linkElement()" returns null.

I've tried to modify the javascript code a little, but can't get the things working.

Is this expected to happen?

Simón de Lizarza

[Yana]

Hi Simón,

Actually my solution works only for normal buttons, for templated buttons is easier, you don't need any javascript, just set CssClass property to "rightAlignedWrapper" class (the same as in the example I've attached) and they will be aligned.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Simón]

Marked as answer.

Thanks for the help Yana.

Simón de Lizarza

[Simón]

Hi Yana,

Do you know if the CSS used to align the buttons to the right of the ToolBar can cause any strange behavior in the buttons where IsSeparator ="true"?

I have the following code:

<telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%" CssClass="SeparatedButtons">
                    <Items>
                        <telerik:RadToolBarButton ImageUrl="/ssg/images/tools.png" Text="Item1" runat="server">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton IsSeparator="true">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" Text="Item 2" Value="Item2" ImageUrl="/ssg/images/tools.png">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton IsSeparator="true">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" Text="Exportar" Value="exportCsv" ImageUrl="/ssg/images/tools.png">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" Value="imgAjuda" CssClass="rightAlignedWrapper">
                            <ItemTemplate>
                                <asp:Image ID="imgAjudaCadastro" ImageUrl="/ssg/images/ajuda.png" runat="server" />
                            </ItemTemplate>
                        </telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>

The separators aren't showing where they should. All the separators are being rendered to the right of the button with text="Exportar", like in the attached image.

If I remove the custom CssClasses of the toolbar, all the code render like expected.

Can I modify something in the custom Css to maintain the function to make the buttons aligned to the right and make the separators render like they should?

Thank you very much,

Simón de Lizarza

[Yana]

Hi Simón,

You should also add the following css styles for the separators:

div.SeparatedButtons .rtbSeparator {
    float: left;
}

All the best,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Simón]

Thanks Yana, it solved the problem. Now I achieved the layout desired in my toolbar.

Simón de Lizarza

[Ricardo Pinto]

Greetings!

I have a similar scenario, except for the following difference: I want to align to the right a normal radtoolbarbutton and a templated radtoolbarbutton (with two checkboxes).

I used the described techniques and both work fine (javascript function OnClientLoad for the normal radtoolbarbutton, CssClass="rightAlignedWrapper" for the templated radtoolbarbutton).

However, the templated radtoolbarbutton is rendered in the right most position (as you can see in the screenshot attached) and I would prefer to have the normal radtoolbarbutton in that position.

Is there any other css fix I can try?
We're using this version of the Telerik.Web.UI dll: 2011.2.1018.40.

Thanks in advance for your help!
Best regards,

Ricardo

[Kate]

Hello Ricardo,

One way I could think of is to set an outer div to the RadToolBar with right-to-left direction that will position the buttons of the control to the right

<div dir="rtl">
        <telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%">
            <Items>
                ....
            </Items>
        </telerik:RadToolBar>
</div>

 
Regards,
Kate
the Telerik team