Button width

7 posts, 0 answers
  1. Oleg
    Oleg avatar
    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

     

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    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 
        width100px
     
    .CustomClass .rtbItem .rtbWrap, 
    .CustomClass .rtbItem .rtbOut, 
    .CustomClass .rtbItem .rtbMid, 
    .CustomClass .rtbItem .rtbIn, 
    .CustomClass .rtbItem .rtbVOriented 
        floatnone
        displayblock

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Oleg
    Oleg avatar
    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

     

  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    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.
  6. Oleg
    Oleg avatar
    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
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    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.
  8. Oleg
    Oleg avatar
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017