Positioning of buttons inside toolbar

12 posts, 2 answers
  1. Simón
    Simón avatar
    21 posts
    Member since:
    Dec 2008

    Posted 22 Jan 2010 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Simón
    Simón avatar
    21 posts
    Member since:
    Dec 2008

    Posted 22 Jan 2010 Link to this post

    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
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 Jan 2010 Link to this post

    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.
  6. Simón
    Simón avatar
    21 posts
    Member since:
    Dec 2008

    Posted 26 Jan 2010 Link to this post

    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
  7. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 27 Jan 2010 Link to this post

    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.
  8. Simón
    Simón avatar
    21 posts
    Member since:
    Dec 2008

    Posted 27 Jan 2010 Link to this post

    Marked as answer.

    Thanks for the help Yana.

    Simón de Lizarza
  9. Simón
    Simón avatar
    21 posts
    Member since:
    Dec 2008

    Posted 28 Jan 2010 Link to this post

    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
  10. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 01 Feb 2010 Link to this post

    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.
  11. Simón
    Simón avatar
    21 posts
    Member since:
    Dec 2008

    Posted 25 Feb 2010 Link to this post

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

    Simón de Lizarza
  12. Ricardo Pinto
    Ricardo Pinto avatar
    36 posts
    Member since:
    Sep 2008

    Posted 07 Nov 2011 Link to this post

    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
  13. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 10 Nov 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017