This is a migrated thread and some comments may be shown as answers.
Positioning of buttons inside toolbar
11 Answers 154 Views
This is a migrated thread and some comments may be shown as answers.
Simón
Top achievements
Rank 1
Simón asked on 22 Jan 2010, 01:30 PM
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

11 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 22 Jan 2010, 01:59 PM
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.
0
Simón
Top achievements
Rank 1
answered on 22 Jan 2010, 02:56 PM
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
0
Yana
Telerik team
answered on 25 Jan 2010, 04:30 PM
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.
0
Simón
Top achievements
Rank 1
answered on 26 Jan 2010, 04:10 PM
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
0
Accepted
Yana
Telerik team
answered on 27 Jan 2010, 02:09 PM
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.
0
Simón
Top achievements
Rank 1
answered on 27 Jan 2010, 04:00 PM
Marked as answer.

Thanks for the help Yana.

Simón de Lizarza
0
Simón
Top achievements
Rank 1
answered on 28 Jan 2010, 12:16 PM
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
0
Accepted
Yana
Telerik team
answered on 01 Feb 2010, 08:34 AM
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.
0
Simón
Top achievements
Rank 1
answered on 25 Feb 2010, 07:50 PM
Thanks Yana, it solved the problem. Now I achieved the layout desired in my toolbar.

Simón de Lizarza
0
Ricardo Pinto
Top achievements
Rank 1
answered on 07 Nov 2011, 12:47 PM
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
0
Kate
Telerik team
answered on 10 Nov 2011, 02:49 PM
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
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
Asked by
Simón
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Simón
Top achievements
Rank 1
Yana
Telerik team
Ricardo Pinto
Top achievements
Rank 1
Kate
Telerik team
Share this question
or