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

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

8 Answers 596 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Jean-Marie
Top achievements
Rank 1
Jean-Marie asked on 20 Jun 2012, 11:58 AM
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

8 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 20 Jun 2012, 01:19 PM
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.
0
Jean-Marie
Top achievements
Rank 1
answered on 20 Jun 2012, 01:54 PM
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.

0
soraya
Top achievements
Rank 1
answered on 27 Jun 2012, 09:58 PM
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????
0
Princy
Top achievements
Rank 2
answered on 28 Jun 2012, 08:19 AM
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.
0
soraya
Top achievements
Rank 1
answered on 28 Jun 2012, 02:57 PM
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.
0
Princy
Top achievements
Rank 2
answered on 29 Jun 2012, 05:00 AM
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.
0
soraya
Top achievements
Rank 1
answered on 29 Jun 2012, 02:55 PM
thanks, thanks,thanks this solucion works!!!!!!
0
Randall
Top achievements
Rank 2
answered on 01 Oct 2014, 01:29 PM
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
Tags
ToolBar
Asked by
Jean-Marie
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Jean-Marie
Top achievements
Rank 1
soraya
Top achievements
Rank 1
Randall
Top achievements
Rank 2
Share this question
or