Rendering Issues with 2011.3.1305

[Michael Malone]

I'm getting bad layout/rendering with my RadRibbonBar controls after I upgraded to 2011.3.1305 release. The controls appears to have all the RibbonBarGroups squashed together, overlapping each other so it's unreadable.

Here is a simple example -

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" Width="100%"  Skin="Office2007">
        <telerik:RibbonBarTab Text="Home">
            <telerik:RibbonBarGroup Text="Team Member Info" EnableLauncher="true">
                <Items>
                    <telerik:RibbonBarButton ID="lblEmpName" runat="server" Size="Large" Text="" ImageUrlLarge="Images/LTCONTCT.GIF" />
                    <telerik:RibbonBarButton ID="lblDept" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblJob" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblPayType" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                </Items>
            </telerik:RibbonBarGroup>
            <telerik:RibbonBarGroup Text="SAP Info" EnableLauncher="true">
                <Items>
                    <telerik:RibbonBarButton ID="lblEmpNum" runat="server" Size="Large" Text="" ImageUrlLarge="Images/LTCOMMNT.GIF" />
                    <telerik:RibbonBarButton ID="lblEmpSubGroup" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblHireDate" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblSupName" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                </Items>
            </telerik:RibbonBarGroup>
            <telerik:RibbonBarGroup Text="Vacation" EnableLauncher="true" Width="300px">
                <Items>
                    <telerik:RibbonBarButton ID="lblVacTotal" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblVacUsed" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblVacAvail" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                </Items>
            </telerik:RibbonBarGroup>
            <telerik:RibbonBarGroup Text="Personal Hours" EnableLauncher="true">
                <Items>
                    <telerik:RibbonBarButton ID="lblPersHoursTotal" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblPersHoursAvail" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblPersHoursUsed" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                </Items>
            </telerik:RibbonBarGroup>
            <telerik:RibbonBarGroup Text="Bonus Days" EnableLauncher="true">
                <Items>
                    <telerik:RibbonBarButton ID="lblBonusDaysAvail" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblBonusDaysUsed" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                </Items>
            </telerik:RibbonBarGroup>
            <telerik:RibbonBarGroup Text="Overtime" EnableLauncher="true">
                <Items>
                    <telerik:RibbonBarButton ID="lblOverTimeCurrentWeek" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                    <telerik:RibbonBarButton ID="lblOverTimeCurrentYear" runat="server" Size="Medium" Text="" ImageUrl="Images/greybullet.gif" />
                </Items>
            </telerik:RibbonBarGroup>
        </telerik:RibbonBarTab>
    </telerik:RadRibbonBar>

[Helen]

Hello Michael,

What is the exact browser that you use?
Could you please send us a screenshot, which demonstrates the issue?

Greetings,
Helen
the Telerik team

[Michael Malone]

Here is a screenshot with 2011.3.1305 Dev Hotfix showing the Rendering Issues. I've also attached a screenshot with version 2011.3.1115.40 which shows it working as expected.

Browsers used - 
Chrome: 16.0.912.75 m
IE: 9.0.8112.16421

[Michael Malone]

Just checking if there was any update on this? Thanks.

[Helen]

Hello Michael,

Do you run the IE9 in "Compat View" as shown in the attached screenshot?


Kind regards,
Helen
the Telerik team

[Michael Malone]

I do. Is this going to be a problem? I'm deploying these corporate sites where I can't control what mode the users IE 9 is set to.

[Fred Taylor]

Same issue here.  IE7 on WinXP.  I'm going to have to roll back to older controls.

[Kate]

Hi Fred and Michael,

Indeed the appearance that you describe is a bug of the RadRibbonBar control that we are already aware of. It is already logged for fixing, but since it is rather a complex one I can not provide a workaround until the problem is fixed, please use the previous version of the controls.

Greetings,
Kate
the Telerik team

[Chris]

This still exists in release Q1 2012 running on Win7/IE9.
The work-around I found was to force IE8 (or better) compatibility via the meta-tag.
 

<!-- forces IE to not use compatibility mode -->
<meta http-equiv="X-UA-Compatible" content="IE=8" />

[Christian]

I am having the same issues with ribbon bar.  when running IE8 when the browser is not fully maximized the ribbon does not display all of the sections.  I have attached 2 images to display the changes in behavior Im getting.

Also I am getting the squashed images when menu items are disabled similar to the original posters issue.

[Ivan Zhekov]

Hello, Christian, Fred, Michael and everyone else.

We are working on a complete rewrite of the resizing functionality of the ribbon and so far it looks like it is going to land just in time to be tested and released with SP1.

Regards,
Ivan Zhekov
the Telerik team

[Ruben]

we are currently running version 2012.1.411.40 and are still experiencing is RibbonBar issues with clients using IE6 and IE7.  Is this issue still be worked on?

[Ivan Zhekov]

Hi, Rueben.

We were not pleased with the way how things worked out with the fix. It did work OK in most of the cases, but not all.

In addition, and the main reason for not releasing it for the SP, the change was quite breaking and needs to be in a Q release.

Unfortunately, we can't extract just the fix from the rest of the code changes, as they go together.

Greetings,
Ivan Zhekov
the Telerik team

[Michael Malone]

Any updates on this issue? It looks like the sizing is ok now but the "Titles" are not sized correctly. Hovering the mouse over the title causes it to snap back into the proper width.

[Ivan Zhekov]

Hello, Michael.

In the official 2012 Q2 release, there were some issues with the titles under IE7 or IE9/8 as IE7.

We did however fixed this and it's available in the latest internal build that was out yesterday. Of course the latest internal build is not intended for deployment as it may contain unstable features.

You could download it and test locally if the problem is gone on your side and once the SP is out you can use it for deployment.

Greetings,
Ivan Zhekov
the Telerik team

[Aarsh]

Hi, there, I've an alert box for the page_prerender event and RibbonBarTab looks good at least till that event, after that it becomes goofy.

Strange enough, when I debug the solution from within Visual Studio 2k10, I do not observe RibbonBarTab items going goofy !

Following is what I see in property of Web.UI
Runtime Version: v4.0.30319
Version: 2012.1.411.40

Nice blog work, Ivan :-)


I am using IE 9 / Windows 7 Pro 64 Bit

[Ivan Zhekov]

Hi, Arash.

The changes discussed in this thread were released with the 2012 Q2 release and in terms not available with 2012.1.411.

If you download that or later release, you will see the Ribbon behaving correctly.

Regards,
Ivan Zhekov
the Telerik team

[Matthew]

This is is still not fixed in the latest release. 

[Aarsh]

Hello , Matthew

The observed behavior could have been caused by the well known position: relative bug in IE6/7. To fix it, you need to add style="position:relative" to any container in which erratic controls are located.

Another approach you could try is to add the following property:

Copy Code

<telerik:RadDatePicker ... DateInput-EnableSingleInputRendering="false" > </telerik:RadDatePicker>

I hope this will prove helpful. If the issue remains or you have different specifications, please elaborate some more on the issue.

Thanks,
-Aarsh

[Michael Malone]

It's still not fixed in the latest release for me either. It looks better than it did but it's still not rendering properly. Notice the width isn't exactly rendering correctly for each RibbonBarGroup. 

[Michael Malone]

Any ideas? Thanks!

[Aarsh]

Well, I use IE 9 (checking form from about ie ain't enough) F12 and browser mode and documentation mode must be IE 9. Have not tested with other browsers.

One more thing, make sure it not just your machine where this happens, but also other machines and the production server - sometimes things change machine to machine.

hth

Thanks,
-Aarsh

[Ivan Zhekov]

Hi, Michael.

We have addressed the issue and the fix will be available in the next internal release or the one after.

Regards,
Ivan Zhekov
the Telerik team