Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Toolbar > Toolbar width

• Mike Cahill

  Posted on May 22, 2006 (permalink)

  Hi
  
  I'd like to have my toolbar stretch across 100% of the screen width even though it only contains a few buttons. Also, I'd like to be able to right justify a couple of the buttons so there will be some on the left and then a gap and then some on the right of the toolbar. Are either of these items doable?
  
  Thanks
  
  Mike
  

• Peter Peter

  Posted on May 23, 2006 (permalink)

  Hello Mike,
  
  Please, view the KB on Stretching r.a.d.toolbar to fit the width of the page. There is no easy way to separate the toolbar buttons and justify them. However, there is a workaround: create two r.a.d.toolbars and place them in the same div. One toolbar will have the buttons right justified and the other will have them left justified. I hope you find this helpful. 
  
  
  
  All the best,
  Peter
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

• brajoh

  Posted on Apr 14, 2008 (permalink)

  This workaround is not working for me.
  
  <div class="web20_RadToolBar_horizontal" style="width: 100%; text-align:left">
          <radTlb:RadToolbar AutoPostback="false" ID="RadToolbar1" DisplayEnds="false" runat="server" Skin="Web20">
              <items>
                  <radtlb:radtoolbarbutton DisplayType="TextImage" ToolTip="Lukk" CommandName="Lukk" ButtonImage="new.gif" />
              </items>
          </radTlb:RadToolbar>
  </div>
  

• Peter Peter

  Posted on Apr 14, 2008 (permalink)

  Hi Brajoh,
  
  I am glad to inform you that the new RadToolbar for ASP.NET AJAX can occupy the entire window width by setting its Width property to 100%. You don't need any workarounds to acomplish this.
  
  
  All the best,
  Peter
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• brajoh

  Posted on Apr 15, 2008 (permalink)

  Thats good news but i don't have license on RadToolbar for ASP.NET AJAX.
  I have radcontrols Q3 2007.

• Peter Peter

  Posted on Apr 15, 2008 (permalink)

  Hello Brajoh,
  
  Since you have purchased RadControls Q3 2007 you are also entitled to receive the Prometheus suit, which should be available for download from your client.net area. The Q1 2008 release is due today, so you may check your client.net account later today and download the Prometheus suit.
  
  
  Best wishes,
  Peter
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Derick

  Posted on Jan 23, 2009 (permalink)

  Hi Peter, we have just purchased the RadControls for asp.net ajax and I am setting the width property to 100% and the toolbar will not stretch the width of my page, it sets its width to exactly the width of the controls I have in it, but if I set it to 800px as I did here in this code example it will set the toolbar to 800px.  Have I missed something?
  
  

   

  <telerik:RadToolBar Style="text-align: Left;" ID="RadToolBar1" runat="server" Skin="Office2007"

  Width="800px">

  <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

  <Items>

  <telerik:RadToolBarButton runat="server" Text="Add New">

  </telerik:RadToolBarButton>

  <telerik:RadToolBarDropDown runat="server" Text="UIC of Responsiblity">

  </telerik:RadToolBarDropDown>

  <telerik:RadToolBarButton runat="server" Text="Button1" DisplayName="TextBox1">

  <ItemTemplate>

  <input type="text" value='<%# DataBinder.Eval(Container, "Attributes['DisplayName']") %>' />

  </ItemTemplate>

  </telerik:RadToolBarButton>

  </Items>

  </telerik:RadToolBar>

• Yana Yana

  Posted on Jan 26, 2009 (permalink)

  Hello Derick,
  
  In our latest release 2008 Q3 SP2  this issue is fixed, please download it and give it a try.
  
  Best regards,
  Yana
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• Derick

  Posted on Jan 27, 2009 (permalink)

  We purchased and downloaded version 2008.31314 for the ASP.NET controls and I am not showing a SP2 in the downloads area of my account.  Is there another place to get the SP?  The version I mentioned above is the only download I see available.
  
  Thanks for your reply.
  
  Derick

• Yana Yana

  Posted on Jan 28, 2009 (permalink)

  Hi Derick,
  
  Actually 2008.3.1314 version is exactly the SP2 release.
  I am sorry I didn't understand the question, please use the following css style in order to set width of RadToolBar:
  
  

  div.RadToolBar_Office2007 {

  margin:0 !important;

  padding:0 !important;

  width:100%;

  }

  
  Alternatively, you can set it directly in the definition of the toolbar like this:
  
  

  <telerik:RadToolBar Style="text-align: Left; width: 100%" ID="RadToolBar1"

  runat="server" Skin="Office2007">

  
  Best regards,
  Yana
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• Carl

  Posted on Sep 24, 2009 (permalink)

  Hi there,

  
  

  I would like to have a 100% width toolbar, ideally with some buttons right justified and some left (if I were being really demanding I'd like to centralise some too but that can be a problem for another day!). I realise the control can't do this out of the box, but when I put two toolbars in the same div, I get a small gap between the two. Please could someone tell me the best way to eliminate the gap?

  
  

  Thanks v much, Carl

• Yana Yana

  Posted on Sep 26, 2009 (permalink)

  Hello Carl,
  
  Please check the attached page which demonstrates the needed approach.
  
  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.

  Attached files

  • toolbaralignbuttontotheright.zip

• Carl

  Posted on Nov 10, 2009 (permalink)

  Thanks v much for this, but unfortunately I get a javascript error:

  
  

   'get_linkElement().className' is null or not an object
  

  
  

  The element that want to be aligned right are in an ItemTemplate, but I have tried an ordinary button and this produces the same error unfortunately. 

  
  

  Thanks v much, Carl

  
  

• Yana Yana

  Posted on Nov 13, 2009 (permalink)

  Hi Carl,
  
  Could you please send us the definition of the toolbar you're using? Thanks
  
  Best wishes,
  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.

• Carl

  Posted on Nov 16, 2009 (permalink)

  <telerik:RadToolBar ID="CMMToolBar"

  runat="server"

  CausesValidation="false"

  Width="100%"

  Skin="Office2007"

  OnClientLoad="clientLoad"

  CssClass="SeparatedButtons">

  <Items>

  <telerik:RadToolBarButton Text="Option 1" NavigateUrl="~/opt1.aspx" CausesValidation="false"   />

  <telerik:RadToolBarButton Text="Option 2" Value="val1" CausesValidation="false" />

  <telerik:RadToolBarButton Text="Option 3" Value="ListAdjourned" CausesValidation="false"  />

  <telerik:RadToolBarButton  Text="Option 4" Value="val2" CausesValidation="false"  />

  <telerik:RadToolBarButton  Text="Option 5" Value="ListCancelled" CausesValidation="false"  />

  <telerik:RadToolBarDropDown Text="Reports">

  <Buttons>

  <telerik:RadToolBarButton Text="Option" NavigateUrl="~/Report/rep.aspx" />

  </Buttons>

  </telerik:RadToolBarDropDown>

  <telerik:RadToolBarDropDown Text='Programmatically Added Values' />

  <telerik:RadToolBarButton CssClass="rightAligned">

  <ItemTemplate>

  <asp:Panel runat="server">

  <asp:TextBox runat="server" ID="txtSearchTerm" />

  <asp:LinkButton runat="server" ID="lbPerformSearch"  OnClick="lbPerformSearch_Click" Text="Search" />

  </asp:Panel>

  </ItemTemplate>

  </telerik:RadToolBarButton>

  </Items>

  </telerik:RadToolBar>

• Yana Yana

  Posted on Nov 19, 2009 (permalink)

  Hi Carl,
  
  Thank you for sending the definition.
  
  The error occurs because you're using template for the right-aligned button, in this specific case you don't even need the clientLoad event, just set CssClass to "rightAlignedWrapper". I've attached a sample page for a reference.
  
  Sincerely yours,
  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.

  Attached files

  • toolbarbuttonstotherighttest.zip

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Toolbar > Toolbar width