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

Button alignment questions

18 Answers 703 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Louis
Top achievements
Rank 1
Louis asked on 23 Jun 2008, 06:37 PM
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?

18 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 25 Jun 2008, 10:34 AM
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
0
Louis
Top achievements
Rank 1
answered on 26 Jun 2008, 06:54 PM
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.
0
Louis
Top achievements
Rank 1
answered on 07 Jul 2008, 07:32 PM
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';             
                        } 
                    } 
                }  
            } 
 

0
Simon
Top achievements
Rank 1
answered on 05 Sep 2008, 01:06 PM
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'
      }  
   } 

0
Henrik
Top achievements
Rank 1
answered on 12 Mar 2009, 12:59 PM
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):
$("li", $("#<%=radToolBar10.ClientID%>")).each(function() { 
            if ($(this).children(".rightAligned").length > 0) { 
                $(this).addClass("rightAlignedWrapper"); 
            } 
        }); 
P.S. I use ItemTemplates and that's why I search for <li> tags
0
Axe
Top achievements
Rank 1
answered on 07 May 2009, 04:22 AM
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?
0
Shane
Top achievements
Rank 1
answered on 10 Nov 2009, 01:43 PM
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
0
Louis
Top achievements
Rank 1
answered on 10 Nov 2009, 04:21 PM
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)

0
Shane
Top achievements
Rank 1
answered on 10 Nov 2009, 04:41 PM

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
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 17 Dec 2009, 05:54 PM
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.
0
Shane Grant
Top achievements
Rank 1
answered on 23 Dec 2009, 06:05 AM
I second the request to have this functionality built in, what a pain this is to accomplish without problems in one browser or another.
0
Yana
Telerik team
answered on 23 Dec 2009, 07:49 AM
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.
0
Remus
Top achievements
Rank 1
answered on 28 Feb 2011, 01:10 PM
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;
}
0
Virendra Shinde
Top achievements
Rank 1
answered on 30 Jun 2011, 08:58 PM
Has the Feature Request for "Justify" Proprty been implemented ??
0
Kate
Telerik team
answered on 05 Jul 2011, 03:22 PM
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!

0
William
Top achievements
Rank 2
answered on 14 Sep 2011, 07:36 PM
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>
0
Henrik
Top achievements
Rank 1
answered on 15 Sep 2011, 07:40 AM
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.
0
Kate
Telerik team
answered on 20 Sep 2011, 10:46 AM
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
Tags
ToolBar
Asked by
Louis
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Louis
Top achievements
Rank 1
Simon
Top achievements
Rank 1
Henrik
Top achievements
Rank 1
Axe
Top achievements
Rank 1
Shane
Top achievements
Rank 1
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Shane Grant
Top achievements
Rank 1
Yana
Telerik team
Remus
Top achievements
Rank 1
Virendra Shinde
Top achievements
Rank 1
Kate
Telerik team
William
Top achievements
Rank 2
Share this question
or