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

[Jean-Marie]

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

[Princy]

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.

[Jean-Marie]

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.

[soraya]

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????

[Princy]

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.

[soraya]

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.

[Princy]

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.

[soraya]

thanks, thanks,thanks this solucion works!!!!!!

[Randall]

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