Button alignment questions

19 posts, 0 answers
  1. Louis
    Louis avatar
    23 posts
    Member since:
    Feb 2006

    Posted 23 Jun 2008 Link to this post

    I have a client that insists on having most of the toolbar items on the left hand side of a toolbar that stretches completely across the window, but wants two of the toolbar items (help and close) pegged to the right-hand side of the toolbar so that they are always in the same place for the users.

    I can't figure out how to get this to work in the toolbar. I've even tried putting two toolbars in the same table cell, but that went poorly for me.

    Can anyone provide suggestions for how to accomplish this?
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 25 Jun 2008 Link to this post

    Hello Karl Costenbader,

    True, one option would be to use two RadToolBars within one container, yet such a solution would generate more markup and would be semantically wrong.

    You can use the following markup & script:
    <telerik:RadToolBar ID="radToolBar10" CssClass="SeparatedButtons" runat="server"
        <Items> 
            <telerik:RadToolBarButton Text="Theta" /> 
            <telerik:RadToolBarButton Text="Epsylon" /> 
            <telerik:RadToolBarButton Text="Lambda" /> 
            <telerik:RadToolBarButton Text="Epsylon" /> 
             
            <%-- these will be shown in reverse order --%> 
            <telerik:RadToolBarButton Text="Kappa" CssClass="rightAligned" /> 
            <telerik:RadToolBarButton Text="Iota" CssClass="rightAligned" /> 
            <telerik:RadToolBarButton Text="Rho" CssClass="rightAligned" /> 
        </Items> 
    </telerik:RadToolBar> 
     
    <script type="text/javascript"
        (function () { 
            var toolbar = $get('<%= radToolBar10.ClientID %>'); 
             
            var linkItems = toolbar.getElementsByTagName ('a'); 
             
            for (var i = 0len = linkItems.length; i < len; i++) 
            { 
                if (linkItems[i].className.indexOf('rightAligned') >= 0) 
                { 
                    linkItems[i].parentNode.className += " rightAlignedWrapper"; 
                } 
            } 
        })(); 
    </script> 

    ...in conjunction with these CSS styles:
    div.SeparatedButtons, 
    div.SeparatedButtons .rtbOuter, 
    div.SeparatedButtons .rtbMiddle, 
    div.SeparatedButtons .rtbInner 
        displayblock
        floatnone
     
    div.SeparatedButtons .rtbUL 
        displayblock
     
    * html div.SeparatedButtons .rtbUL 
        displayinline-block
     
    div.SeparatedButtons .rtbItem 
        floatleft
     
    div.SeparatedButtons .rightAlignedWrapper 
        float: right
        displayblock
    }


    Regards,
    Alex
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Louis
    Louis avatar
    23 posts
    Member since:
    Feb 2006

    Posted 26 Jun 2008 Link to this post

    Thank you for the quick and thorough response. I have used this as the basis to solve my problem and it works very well now.
  5. Louis
    Louis avatar
    23 posts
    Member since:
    Feb 2006

    Posted 07 Jul 2008 Link to this post

    A quick followup: the suggested code will not work correctly for buttons that render ItemTemplates since they don't contain link tags (a href). Instead, you need to find all li items and then see if the first child contains the rightAligned class. This may not necessarily work in all cases, but it has resolved all of the issues that I was having:

                // Find all list elements in the toolbar cell 
                var listItems = oToolbarCell.getElementsByTagName('li');  
                if (listItems) { 
                    for (var i = 0; i < listItems.length; i++) { 
                        var oItem = listItems[i]; 
                        // Check the first child 
                        if (oItem.firstChild) { 
                            // If the button or label was assigned the fake CssClass rightAligned at design time,  
                            // we need to add the rightAlignedWrapper class to the list item's list of classes. 
                            if (oItem.firstChild.className.indexOf('rightAligned') >= 0) { 
                                oItem.className += ' rightAlignedWrapper';             
                            } 
                        } 
                    }  
                } 
     

  6. Simon
    Simon avatar
    7 posts
    Member since:
    Aug 2008

    Posted 05 Sep 2008 Link to this post

    If you have problems, because the item with the "rightAligned"-class is not the first child you can do it like that:
    var listItems = document.getElementById('<%= _toolbar.ClientID %>').getElementsByTagName('li'); 
    if (listItems)  
    {  
       for (var i = 0; i < listItems.length; i++) 
       {  
          var oItem = listItems[i]; 
          var rightAligned = false
          var childItems = oItem.children; 
          for (var j = 0; childItems && j < childItems.length; j++) 
          { 
             rightAligned |= (childItems[j].className.indexOf('rightAligned') >= 0); 
          } 
          if (rightAligned)  
          {  
             oItem.className += ' rightAlignedWrapper'
          }  
       } 

  7. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 12 Mar 2009 Link to this post

    Hi,

    Good post - helped med a lot. However, the code does not work in Firefox, so I'll just post a code sample here that works in both IE and FF and uses jQuery (which comes with the Telerik controls):
    1 $("li", $("#<%=radToolBar10.ClientID%>")).each(function() { 
    2             if ($(this).children(".rightAligned").length > 0) { 
    3                 $(this).addClass("rightAlignedWrapper"); 
    4             } 
    5         }); 
    P.S. I use ItemTemplates and that's why I search for <li> tags
  8. Axe
    Axe avatar
    88 posts
    Member since:
    Feb 2007

    Posted 06 May 2009 Link to this post

    How can we make this work in IE8?

    EDIT:
    Actually I couldn't get it to work in FF3 either.
    Anyone a CSS guru can work how to float a list item?
  9. Shane
    Shane avatar
    3 posts
    Member since:
    Jun 2009

    Posted 10 Nov 2009 Link to this post

    Hi All

    I used the code/css here to float a toolbar button over to the right hand side, and it works well. However, when I include a separator, the separator and every button that follows it appear too low down in the toolbar and the bottom of their images is cut off.

    Any suggestions?

    Regards

    Shane
  10. Louis
    Louis avatar
    23 posts
    Member since:
    Feb 2006

    Posted 10 Nov 2009 Link to this post

    Funnily enough, I ran into this exact problem last week. The solution is to instantiate the SepartorTemplate using the constructor that accepts a CSS Class. Here is the code that we use:

                    oButton = New RadToolBarButton
                    oButton.ItemTemplate = New SeparatorTemplate(RIGHT_ALIGNED_BUTTON_CSS)
                    tlbToolbar.Items.Add(oButton)

  11. Shane
    Shane avatar
    3 posts
    Member since:
    Jun 2009

    Posted 10 Nov 2009 Link to this post


    Thanks Karl, I'll give that a go.

    I did find a parital solution, which was to add to the CSS:

    div.SeparatedButtons .rtbSeparator
    {
      display: block;
      float: left;
    }

    This put the buttons back in the normal place rather than falling off the bottom. The separators themselves though were hard against the top of the toolbar and I couldn't work out how to move them down, so I made them the height of the toolbar so they extend from top to bottom which is not too bad, but not ideal.

    Shane
  12. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 17 Dec 2009 Link to this post

    I think this ought to become built-in functionality within the toolbar. Each button should have a "justify" or "float" property which can be set to left or right and will then align the button on the specified side of the toolbar.Hopefully Telerik can do this.
  13. Shane Grant
    Shane Grant avatar
    20 posts
    Member since:
    Dec 2009

    Posted 23 Dec 2009 Link to this post

    I second the request to have this functionality built in, what a pain this is to accomplish without problems in one browser or another.
  14. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Dec 2009 Link to this post

    Hello there,

    Thank you for this feature request, I've logged it and it will be considered.

    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.
  15. Remus
    Remus avatar
    2 posts
    Member since:
    Feb 2010

    Posted 28 Feb 2011 Link to this post

    In some limited scenarios, where only a few elements need to be right aligned and where the toolbar position is known and it is fixed on the page, the absolute position might also be usable.

    For example, if the toolbar is top-aligned on the page, placing a toolbar button on the right corner of the toolbar (or the right corner of the page actually) can be done like this:

    <telerik:RadToolBarButton runat="server" CssClass="RightAlignedTool1" ...  />

    .RightAlignedTool1
    {
        position: absolute;
        top: 3px;
        right: 3px;
    }
  16. Virendra Shinde
    Virendra Shinde avatar
    12 posts
    Member since:
    Mar 2010

    Posted 30 Jun 2011 Link to this post

    Has the Feature Request for "Justify" Proprty been implemented ??
  17. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 05 Jul 2011 Link to this post

    Hello Virendra,

    Unfortunately we have not implemented this property since the desired appearance of the RadToolBar can easily be achieved using few lines of css code, as described below.  

    Greetings,
    Kate
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  18. William
    William avatar
    4 posts
    Member since:
    Mar 2009

    Posted 14 Sep 2011 Link to this post

    Is it difficult to incorporate into the suite?  Incorporating such functionality into the build would reduce the risk of issues regarding backward compatability with future telerik releases.

    That said I am having a problem getting this to work when ItemTemplates are involved.  I would like the Search item to be right-aligned in the toolbar.  Perhaps I am missing the obvious.  Thank you for your time.

    <telerik:RadToolBar ID="rtb" OnClientButtonClicking="ToolbarOnClientButtonClicking"
        Width="100%" runat="server" CssClass="SeparatedButtons">    
        <Items>
         <telerik:RadToolBarDropDown Text="Add" ImageUrl="~/Images/BrowseGrid/Plus.png" runat="server" />
         <telerik:RadToolBarButton CssClass="rightAligned" runat="server">
              <ItemTemplate>
                   <asp:TextBox ID="txtSearch" runat="server" />
              </ItemTemplate>
         </telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>
  19. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 15 Sep 2011 Link to this post

    I totally agree with William.
    I have experienced problems with the alignment after upgrading the Telerik version. Incorporating the functionality in the suite would remove such problems.
  20. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Sep 2011 Link to this post

    Hello Henrik and William,

    I already logged your request for future implementation in our PITS where you can follow it and vote for it so that it could get a higher priority:
    http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/7904

    Greetings,
    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