Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > Aling 1 button to the left and 1 to the right in same RadToolBar

• Jean-Marie

  Posted on Jun 20, 2012 (permalink)

  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
  

  Reply

• Princy MVP

  Posted on Jun 20, 2012 (permalink)

  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.

  Reply



• Jean-Marie

  Posted on Jun 20, 2012 (permalink)

  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.

  Attached files

  • Audit.png

  Reply

• Soraya

  Posted on Jun 27, 2012 (permalink)

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

  Reply

• Princy MVP

  Posted on Jun 28, 2012 (permalink)

  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.

  Reply

• Soraya

  Posted on Jun 28, 2012 (permalink)

  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.
  

  Reply

• Princy MVP

  Posted on Jun 29, 2012 (permalink)

  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.

  Attached files

  • Capture.PNG

  Reply

• Soraya

  Posted on Jun 29, 2012 (permalink)

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > Aling 1 button to the left and 1 to the right in same RadToolBar