Article information
Article relates to	RadToolBar for ASP.NET v1.6.5.0  and  RadToolBar for ASP.NET AJAX  (Telerik.Web.UI v2008.1 XXX)
Created by	Peter, Telerik
Last modified by	Simon, Telerik

HOW-TO
Stretch RadToolBar to fit the width of the page.



SOLUTION
There are two ways of achieving the same effect:

    I. Add style="width: 100%;" to the ToolBar declaration;
    II. Add style="display: block; float: none" to the ToolBar declaration

SOLUTION
Since RadToolBar does not support width and height attributes (setting them has no effect), you could use one of the three approaches described below to achieve the desired effect.

    I. Add style="width: 100%;" to the ToolBar declaration:

<rad:RadToolbar

ID="RadToolbar1"

runat="server"

Skin="Default"

DisplayEnds="true"

style="width: 100%;">

...

</rad:RadToolbar>

    This way the Buttons will also stretch proportionally to the width of the ToolBar.

   

    II. Create a simple 'wrapper' ToolBar with a single RadToolBarTemplateButton. Add style="width: 100%;" to the ToolBar declaration. In the Template put the 'real' ToolBar:

<rad:RadToolbar

ID="RadToolbarWrapper"

runat="server"

Skin="Default"

DisplayEnds="true"

style="width: 100%;">

<Items>

<rad:RadToolbarTemplateButton>

<ButtonTemplate>

<rad:RadToolbar

ID="RadToolBarReal"

runat="server"

Skin="Default"

DisplayEnds="false"

style="margin-left: 20%;">

<Items>

...

</Items>

</rad:RadToolbar>

</ButtonTemplate>

</rad:RadToolbarTemplateButton>

</Items>

</rad:RadToolbar>

    Add style="margin-left: X%" to the 'real' ToolBar declaration to control its position in the 'wrapper' ToolBar Template.

   

    The only downside of this approach is that another instance of RadToolBar is created on the page and more HTML is output. The next approach illustrates how this can be avoided.

    III. Create a simple table with one row and three cells. Add appropriate classes and ids to the table structure, so that the default styles of RadToolBar apply to mimic the appearance and basic structure of a standard, 'real' RadToolBar:

<table style="width: 100%;" id="<%=RadToolBarInner1.ClientID%>toolbar" cellspacing="0" cellpadding="0">

<tr>

<td class="default_radtoolbar_left">

<div style="width:5px"></div>

</td>

<td style="width: 100%;" class="default_radtoolbar_horizontal">

...

</td>

<td class="default_radtoolbar_right">

<div style="width: 5px"></div>

</td>

</tr>

</table>

     Finally, add the ToolBar in the middle cell (the '...' area in the code snippet above):

<rad:RadToolbar

ID="RadToolBar1"

runat="server"

Skin="Default"

DisplayEnds="false"

style="margin-left: 40%;">

<Items>

...

</Items>

</rad:RadToolbar>

    Add style="margin-left: X%" to the ToolBar declaration control to control its position in the middle table cell.

   

Comments

• Felix , Jul 20, 2007

  Unfortunaly this looks not very good in my case. the

  is a little bigger than my toolbar. But I found another way to stretch RadToolBar: You should use DisplayEnds="true" and modify for example the CSS style of the right "END": /* .office2000_radtoolbar_right and include: width: 100% */ If you also copy the attributes of a normal element like: .office2000_radtoolbar_horizontal to the .office2000_radtoolbar_right then it looks almost as If RadToolBar fits the whole width. In Firefox the Result is perfect, but in IE 7 the Borders don't work properly. Maybe because there is no content in my <td> -Tag. Here is the style I use: /* .office2000_radtoolbar_right { /* border-right: solid 1px #808080; background-image: url(Img/toolbarRight.gif); background-repeat: no-repeat; width: 7px; height: 28px; */ width: 100%; font-size: 10pt; font-family: Verdana; border-collapse: collapse; background-color: #e1e1e1; border-bottom: solid 1px #808080; border-top: solid 1px #fff; padding-top: 1px; padding-bottom: 1px; } */

• MattLynch , Dec 12, 2007

  You can also do this: ... This method allows you to set the width inside a ASP.Net Skin.

• John Paul , Jun 16, 2008

  The way I solved this problem is via CSS. Create a div and enclose your RadToolBar inside the div. I display an image as the background. Here is the declaration of my CSS div. #tbnav {background: url(Images/menu_bg2.gif) repeat-x;height: 28px;} And here is the div declaration:

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!