This is a migrated thread and some comments may be shown as answers.

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

8 Answers 111 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 13 Sep 2011, 05:01 AM

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>

8 Answers, 1 is accepted

Sort by
0
Bilal
Top achievements
Rank 1
answered on 14 Sep 2011, 04:23 PM
I'm also facing this problem.

Any advices?
0
Kate
Telerik team
answered on 15 Sep 2011, 09:45 AM
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
0
Mark
Top achievements
Rank 1
answered on 16 Sep 2011, 07:06 AM
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

0
Kate
Telerik team
answered on 21 Sep 2011, 12:16 PM
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
0
Garry
Top achievements
Rank 2
Veteran
answered on 08 Feb 2012, 10:04 AM
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.
0
Kate
Telerik team
answered on 13 Feb 2012, 11:06 AM
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 >>
0
Mark
Top achievements
Rank 1
answered on 16 Feb 2012, 12:05 PM
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.
0
Ivan Zhekov
Telerik team
answered on 20 Feb 2012, 01:58 PM
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 >>
Tags
RibbonBar
Asked by
Mark
Top achievements
Rank 1
Answers by
Bilal
Top achievements
Rank 1
Kate
Telerik team
Mark
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
Ivan Zhekov
Telerik team
Share this question
or