Button width in UI for ASP.NET AJAX ToolBar

Oleg

4 posts

Member since:
Jan 2009

Posted 09 Feb 2009 Link to this post

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

Admin

1532 posts

Posted 10 Feb 2009 Link to this post

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

4 posts

Member since:
Jan 2009

Posted 10 Feb 2009 Link to this post

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

Admin

8462 posts

Posted 10 Feb 2009 Link to this post

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

4 posts

Member since:
Jan 2009

Posted 10 Feb 2009 Link to this post

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

Admin

1532 posts

Posted 11 Feb 2009 Link to this post

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

4 posts

Member since:
Jan 2009

Posted 11 Feb 2009 Link to this post

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

Oleg