Aling 1 button to the left and 1 to the right in same RadToolBar

9 posts, 0 answers
  1. Jean-Marie
    Jean-Marie avatar
    4 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    Hi,

    I'm writing to ask how best to align a button to the right and one to the left in the same radtoolbar.

    <telerik:RadToolBar ID="RadToolBarAction" runat="server" Skin="Office2007" Width="100%"
               OnButtonClick="RadToolBarAction_ButtonClick">
               <Items>
                   <telerik:RadToolBarButton Value="BtnSave" meta:resourcekey="BtnSave"
                       ImageUrl="~/Save.gif" />   <--Want this one to the left     
                   <telerik:RadToolBarButton Value="BtnReturnAip" meta:resourcekey="BtnReturnAip"
                       ImageUrl="~/backto_inprog.gif" />    <--Want this one to the right
               </Items>
           </telerik:RadToolBar>

    Thanks in advance for any insight Jim
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2012 Link to this post

    Hi Jean-Marie,

    Try setting CssClass to the RadToolBarButton as follows.

    CSS:
    <style type="text/css">
        .ButtonCSS
        {
           margin-left:1100px;
        }
    </style>

    ASPX:
    <telerik:RadToolBar ID="RadToolBarAction" runat="server" Skin="Office2007" Width="100%">
               <Items>
                   <telerik:RadToolBarButton Value="BtnSave" meta:resourcekey="BtnSave" ImageUrl="../Images/bullet5.jpg" /> 
                   <telerik:RadToolBarButton Value="BtnReturnAip" meta:resourcekey="BtnReturnAip" CssClass="ButtonCSS" ImageUrl="../Images/button_edit_grey.gif" />
               </Items>
    </telerik:RadToolBar>

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jean-Marie
    Jean-Marie avatar
    4 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    Thx for answering Princy.

    Since my post , i find something to help me :)

    .css
    .RadToolBar .buttonGoesRight {
      position:absolute;
      right:11px;
      top:7px;
    }
     

    .aspx

    <telerik:RadToolBar ID="RadToolBarAction" runat="server" Skin="Office2007" Width="100%"
              OnButtonClick="RadToolBarAction_ButtonClick" >
              <Items>
                  <telerik:RadToolBarButton Value="BtnSave" meta:resourcekey="BtnSave" ImageUrl="~/Save.gif" />
                  <telerik:RadToolBarButton CssClass="buttonGoesRight" Value="BtnReturnAip" meta:resourcekey="BtnReturnAip" ImageUrl="~/backto_inprog.gif" />
              </Items>
          </telerik:RadToolBar>

    Thx,
    Jim.

  5. Soraya
    Soraya avatar
    17 posts
    Member since:
    Oct 2011

    Posted 27 Jun 2012 Link to this post

    Hi i try the Jean-Marie 's solucion it works with simple button but if i use RadToolBarDropDown dont move child buttons. how can I do????
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Jun 2012 Link to this post

    Hi Soraya,

    Try the following CSS to achieve your scenario.

    CSS:
    <style type="text/css">
       .RadToolBar .rtbUL, .RadToolBar .rtbItem
            {
                width: 98% !important;
            }
       .RadToolBarDropDown, .RadToolBarDropDown
            {
                width: 60px !important;
            }
    </style>

    ASPX:
    <telerik:RadToolBar ID="RadToolBarAction" runat="server" Width="100%">
      <Items>
        <telerik:RadToolBarDropDown meta:resourcekey="BtnSave" ImageUrl="Images/button_edit_grey.gif">
          <Buttons>
             <telerik:RadToolBarButton Text="1">
             </telerik:RadToolBarButton>
             <telerik:RadToolBarButton Text="2">
             </telerik:RadToolBarButton>
          </Buttons>
        </telerik:RadToolBarDropDown>
        <telerik:RadToolBarDropDown meta:resourcekey="BtnReturnAip" ImageUrl="Images/button_edit_grey.gif">
          <Buttons>
             <telerik:RadToolBarButton Text="1">
             </telerik:RadToolBarButton>
             <telerik:RadToolBarButton Text="2">
             </telerik:RadToolBarButton>
          </Buttons>
        </telerik:RadToolBarDropDown>
      </Items>
    </telerik:RadToolBar>

    Hope this helps.

    Thanks,
    Princy.
  7. Soraya
    Soraya avatar
    17 posts
    Member since:
    Oct 2011

    Posted 28 Jun 2012 Link to this post

    Hi Princy thanks for yoy reply but ir dont works for me beacaus I have other buttons that have to be left (one of them is a RadToolBarDropDown) and only one (other RadToolBarDropDown) have to aling on teh rigth, whe i apply your code all of my RadToolBarDropDown items move to rigth.
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Jun 2012 Link to this post

    Hi Soraya,

    Here is the sample code that I tried based on your scenario.

    CSS:
    <style type="text/css">
      div.RadToolBar .rtbUL
        {
          width: 100%;
          white-space: normal;
        }
      div.RadToolBar .rightButton
        {
          float: right;
        }
    </style>

    ASPX:
    <telerik:RadToolBar ID="RadToolBarAction" runat="server" Width="100%">
      <Items>
        <telerik:RadToolBarButton ImageUrl="../Images/button_edit_grey.gif" Value="start">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarDropDown meta:resourcekey="BtnSave" ImageUrl="../Images/button_edit_grey.gif">
          <Buttons>
            <telerik:RadToolBarButton Text="1">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton Text="2">
            </telerik:RadToolBarButton>
          </Buttons>
        </telerik:RadToolBarDropDown>
        <telerik:RadToolBarButton ImageUrl="../Images/button_edit_grey.gif" Value="mid">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton ImageUrl="../Images/button_edit_grey.gif" Value="mid1">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarDropDown meta:resourcekey="BtnReturnAip" ImageUrl="../Images/button_edit_grey.gif" OuterCssClass="rightButton">
          <Buttons>
            <telerik:RadToolBarButton Text="1">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton Text="2">
            </telerik:RadToolBarButton>
          </Buttons>
        </telerik:RadToolBarDropDown>
      </Items>
    </telerik:RadToolBar>

    Attached is the screenshot.

    Hope this helps.

    Thanks,
    Princy.
  9. Soraya
    Soraya avatar
    17 posts
    Member since:
    Oct 2011

    Posted 29 Jun 2012 Link to this post

    thanks, thanks,thanks this solucion works!!!!!!
  10. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 01 Oct 2014 Link to this post

    Hello Princy,

    I just want to say that I have looked for a way to right-align RadToolBarButtons for a long time and tried many solutions.  Most of them had issues with Separators, ItemTemplates, DropDowns, etc.

    Your method here is by far the best and easiest solution out there.  I have used many of your posts to solve a wealth of issues.  Keep up the great posts!

    Randall
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017