Button text of RibbonBar (100% width) issue when browser resized

9 posts, 0 answers
  1. Mark
    Mark avatar
    6 posts
    Member since:
    Jul 2011

    Posted 13 Sep 2011 Link to this post

    Hello Telerik,

    I am using ASP.Net Ajax Ribbon Bar control.

    I have set its width to 100%, so its width changes as browser resized.

    When I resize the browser to very less width. I found the ribbon bar button gets small to adjust with width. But the button text is getting lost.

    Please find the attached image for reference.


    Please refer below code: (contains first ribbon tab from image only)

    <telerik:RadRibbonBar ID="SampleRibbon" runat="server" Skin="Office2007" Font-Size="12px"

                OnButtonClick="SampleRibbon_ButtonClick" OnMenuItemClick="SampleRibbon_MenuItemClick">

                <telerik:RibbonBarTab Text="One">

                    <telerik:RibbonBarGroup ID="RibbonBarGroup6" runat="server" EnableLauncher="False"

                        Text="Menu Items" Value="">

                        <Items>

                            <telerik:RibbonBarButton ID="rbtnHome" runat="server" Text="Home<br>Page" Size="Large"

                                Width="45px" ToolTip="Home Page" Value="Home" ImageUrlLarge="~/Images/RibbonIcons/try-icon.ico"

                                ImageUrl="~/Images/RibbonIcons/try-icon.gif" />

                            <telerik:RibbonBarButton ID="rbtnCalendar" runat="server" Text="Calendar" Size="Large"

                                Width="60px" ToolTip="Calendar" Value="Calendar" ImageUrlLarge="~/Images/RibbonIcons/Calendar2.ico"

                                ImageUrl="~/Images/RibbonIcons/Calendar2.gif" />

                        </Items>

                    </telerik:RibbonBarGroup>

                    <telerik:RibbonBarGroup ID="RibbonBarGroup7" runat="server" EnableLauncher="False"

                        Text="Reporting" Value="">

                        <Items>

                            <telerik:RibbonBarButton ID="rbtnHomeReport" runat="server" Text="Print<br>Reports"

                                Size="Large" Width="70" ToolTip="Print Reports" ImageUrlLarge="~/Images/RibbonIcons/print1.ico"

                                ImageUrl="~/Images/RibbonIcons/print1.gif" />

                        </Items>

                    </telerik:RibbonBarGroup>

                    <telerik:RibbonBarGroup ID="RibbonBarGroup14" runat="server" EnableLauncher="False"

                        Text="View and Find" Value="" Width="100">

                        <Items>

                            <telerik:RibbonBarButton ID="rbtnHomeFind" runat="server" Text="Find" Size="Large"

                                ToolTip="Find" Width="100" ImageUrlLarge="~/Images/RibbonIcons/find1.ico" ImageUrl="~/Images/RibbonIcons/find1.gif"

                                DisabledImageUrlLarge="~/Images/RibbonIcons/find1_disable.png" DisabledImageUrl="~/Images/RibbonIcons/find1_disable.gif" />

                        </Items>

                    </telerik:RibbonBarGroup>

                    <telerik:RibbonBarGroup ID="RibbonBarGroup8" runat="server" EnableLauncher="False"

                        Text="Help" Value="">

                        <Items>

                            <telerik:RibbonBarButton ID="rbtnHomeHelp" runat="server" Text="User<br>Guide" Size="Large"

                                ToolTip="User Guide" Width="50" ImageUrlLarge="~/Images/RibbonIcons/user_guide.ico"

                                ImageUrl="~/Images/RibbonIcons/user_guide.gif" />

                            <telerik:RibbonBarButton ID="rbtnContachTech" runat="server" Text="Contact<br>Tech"

                                ToolTip="Contact Tech" Size="Large" Width="70" ImageUrlLarge="~/Images/RibbonIcons/contact_tech.ico"

                                ImageUrl="~/Images/RibbonIcons/contact_tech.gif" />

                        </Items>

                    </telerik:RibbonBarGroup>

  2. Bilal
    Bilal avatar
    27 posts
    Member since:
    Sep 2011

    Posted 14 Sep 2011 Link to this post

    I'm also facing this problem.

    Any advices?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 15 Sep 2011 Link to this post

    Hi Mark,

    Indeed the behavior that you encounter is a bug of the RadRibbonBar control. Thank you for reporting it. As a workaround I would suggest that you apply min-width to the control:
    <telerik:RadRibbonBar ID="SampleRibbon" Width="100%" runat="server" Skin="Office2007" Font-Size="12px" style="min-width: 500px">
            
          

    I also updated your Telerik points. 

    Kind regards,
    Kate
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal
  5. Mark
    Mark avatar
    6 posts
    Member since:
    Jul 2011

    Posted 16 Sep 2011 Link to this post

    Hello Telerik,
    I am expecting the RibbonBar behavior just like your team has already done in RibbonBar sample (below link)
     http://demos.telerik.com/aspnet-ajax/ribbonbar/examples/default/defaultcs.aspx
    Here, we can drag the RibbonBar from bottom right corner. And when we reduce its width to extreme less, buttons are behaving very perfectly.
    I am expecting the same behavior for browser re-size.
    If this is not possible with browser re-size, then when can I expect the fix?

    Thanks & Regards

  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Sep 2011 Link to this post

    Hello Mark,

    Please note that in the demo that you refer to there is an outer div with a fixed width and height that prevent the width of the RadRibbonBar control to become so small that the text is no longer visible. One way to work around the issue is either to use the min-width css property as suggested in my previous reply or use an outer div with fixed size like in the demo. Unfortunately I can not give you any time frame when we will be able to fix the bug but we will do our best to accomplish that shortly.   

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  7. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 08 Feb 2012 Link to this post

    Hi Kate

    Please follow this link to a Flash video showing the problem I am encountering.
    When will a fix be available for this?
    I note the current workaround of setting the maximum width which I can use for now.

    Kind Regards, Garry.
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Feb 2012 Link to this post

    Hello Garry,

    Did you set both the ImageUrlLarge and the ImageURL properties of the buttons? You can also try to set the ImageRenderingMode property to Auto as described in this help article and see if you still encounter this issue. Since we will introduce some improvements in the resizing of the RadRibbonBar control I would suggest that you wait for our Q1 2012 official release (Wednesday - Thursday this week) and give it a try.

    Greetings,
    Kate
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  9. Mark
    Mark avatar
    6 posts
    Member since:
    Jul 2011

    Posted 16 Feb 2012 Link to this post

    Hi Kate,

    I have upgraded my libraries with latest build (Q1 2012).
    However, the core issue is not fixed in this release.
    I have attached the screenshot of ribbon earlier (for your reference)

    The core issue is with the button captions. Whenever I re-size the browser to the lesser width, It adjusts the buttons to fit in the button group but IT LOOSES THE BUTTON CAPTION.

    Earlier, you have suggested the workaround of min-width, but I cannot go with this workaround. This triggers the browser to show up the scroll bar.

    Please guide me to fix this issue ASAP.
  10. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 20 Feb 2012 Link to this post

    Hi, Mark.

    We know the resizing is causing problems with the ribbon bar and this is why we are working on fixing this.

    I could say we are 80% there, but we need to do more test cases, more integration tests as well as manual tests to make sure we are releasing an improvement to the ribbon and not a functionality that's immature.

    I ask you to bear with this a little longer. Rest assure, a fix is in development and will be coming with one of the next internal builds.

    I have bookmarked the thread and I will notify once all the development and testing is completed and the fix is included in a internal build.

    All the best,
    Ivan Zhekov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017