Button width

[Oleg]

Hi,

 

What is the correct way to make all buttons in the toolbar have the same width?

By default the width seems to depend on the length of the Text property, thus all buttons are different. I tried setting Width property, but then the buttons often get distorted (when highlighted).

 

Thanks,

 

Oleg

 

[Kamen Bundev]

Hello Oleg,

There's currently no supported way to make the toolbar buttons with the same width. However you can still do it manually by assigning a custom CSS class to the toolbar and removing some floats. For instance add CssClass="CustomClass" to your toolbar and this CSS to your project:

.CustomClass .rtbItem
{
    width: 100px;
}

.CustomClass .rtbItem .rtbWrap,
.CustomClass .rtbItem .rtbOut,
.CustomClass .rtbItem .rtbMid,
.CustomClass .rtbItem .rtbIn,
.CustomClass .rtbItem .rtbVOriented
{
    float: none;
    display: block;
}

This should make all your items with width 100px.

Sincerely yours,
Kamen Bundev
the Telerik team

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

[Oleg]

Hello Kamen,

 

Thanks for your help. Unfortunately it does not seem to work in my case, after applying this style all buttons are completely distorted when in highlighted state. My toolbar is very basic (a simple test project):

<telerik:RadToolBar ID="RadToolBar1" runat="server" CssClass="CustomClass">
    <Items>
        <telerik:RadToolBarButton runat="server" Text="One" ImagePosition="AboveText" ImageUrl="~/Images/Test24.gif" >
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="Two" ImagePosition="AboveText" ImageUrl="~/Images/Test24.gif" Enabled="false">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="Three" ImagePosition="AboveText" ImageUrl="~/Images/Test24.gif" >
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" IsSeparator="true">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="Four" ImagePosition="AboveText" ImageUrl="~/Images/Test24.gif" >
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" Text="Five" ImagePosition="AboveText" ImageUrl="~/Images/Test24.gif" >
        </telerik:RadToolBarButton>
    </Items>
</telerik:RadToolBar>

 

The ASP.NET page does not contain anything other than the default stuff and the stylesheet you suggested. May be something else is incorrect or missing?

 

Thanks,

Oleg

 

[Atanas Korchev]

Hi Oleg,

You have not set the CssClass property of the buttons to "CustomClass" as suggested. Please do so and let us know if it helps.

Regards,
Albert
the Telerik team

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

[Oleg]

Hi Albert,

I understood from Kamen's response that CssClass property should be set on the toolbar. If I set it on the buttons (and remove from the toolbar), things change but don't become better - the buttons' width still depends on the length of Text property, and the toolbar breaks to the next row at the separator.

Oleg

[Kamen Bundev]

Hi Oleg,

Yes, it should be set on the toolbar, not on the buttons. Unfortunately, I'm not able to determine from the toolbar definition why these styles do not work for you. Did you add the CSS to the project and how? You can open a support ticket and send a live URL or a sample project with the issue isolated.

Regards,
Kamen Bundev
the Telerik team

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

[Oleg]

OK, I will do as you suggested. Thanks for all your help.

Oleg