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

[Mark]

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>

[Bilal]

I'm also facing this problem.

Any advices?

[Kate]

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

[Mark]

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

[Kate]

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

[Garry]

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.

[Kate]

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

[Mark]

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.

[Ivan Zhekov]

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