New RadRibbonBar and Width="100%"

[Alain]

Hello,

System: ASP.NET AJAX 2012.2.607.40

In previous version of RadRibbonBar, it was possible to let it to follow the width of the parent component, even with the window itself, by setting its Width="100%".
This doesn't work anymore with the new version of RadRibbonBar.
Any workarounds exist?

Best regards,
Alain

[Ivan Zhekov]

Hello, Alain.

We are aware of this issue and with latest internal build, that was out yesterday, we provided a partial fix.

With the next internal build (due out next week), we'll provide a full fix for all browsers.

For now you can use the following patch:

function pageLoad() {
    // cache jQuery
    var $ = $telerik.$;

    function fixRibbonSize() {
        $find( "Ribbon" )._setRibbonSize( {width: document.body.clientWidth} );
    }

    // remove previous resize handlers
    $( window ).unbind( "resize", fixRibbonSize );

    // add resize handler
    $( window ).bind( "resize", fixRibbonSize );

}

Of course, that's provided you have a full width ribbon bar and the ribbon bar control has and id "Ribbon".

All the best,
Ivan Zhekov
the Telerik team

[Alain]

System: ASP.NET AJAX, 2012.2.626.40

Hi Ivan

Unfortunately, the fix including in last mentionned internal build, for the 100% width of RadRibbonBar, doesn't work very well in our case.

The RadRibbonBar is placed inside a RadPane/RadSplitters, as following:

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" LiveResize="true" PanesBorderSize="0" Width="100%" Height="100%" VisibleDuringInit="false" >
    <telerik:RadPane ID="RadPane1" runat="server" Width="100%" Height="100%" Scrolling="None">
        <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" PanesBorderSize="0" Width="100%" VisibleDuringInit="false" ResizeWithParentPane="true" >
            <telerik:RadPane ID="RadPane2" runat="server" Width="100%" Height="156px" Scrolling="None">
                <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
                    <tr>
                        <td style="width: 100%; height: 100%; border: 2px solid green;">
                            <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" Width="100%" EnableMinimizing="true">
                                <Tabs>
                                    <telerik:RibbonBarTab ID="RibbonBarTab1" Text="Test">
                                        <telerik:RibbonBarGroup ID="RibbonBarGroup1" runat="server" Text="Test" >
                                            <Items>
                                                <telerik:RibbonBarTemplateItem ID="RibbonBarTemplateItem1" runat="server" Size="Medium">
                                                </telerik:RibbonBarTemplateItem>
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                    </telerik:RibbonBarTab>
                                </Tabs>
                            </telerik:RadRibbonBar>
                        </td>
                    </tr>
                </table>
            </telerik:RadPane>
            <telerik:RadPane ID="RadPane3" runat="server" Width="100%" Scrolling="None">
           </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadDockLayout>

The 100% width for the RadRibbonBar is never reached. In our example above, a green border has been added on the 100% width <td> element containing the RadRibbonBar to show the error.

See also the annexed image.

Note: Solution can be sent.

Best regards,
Alain

[Ivan Zhekov]

Hello, Alain.

We are aware of this behaviour and we will fix it. For now our target is SP1, but it might take longer.

The old resizing logic does work in this case. However, the new logic is completely different and we are transferring (more like transitioning) portions of code from the old logic for those cases.

Kind regards,
Ivan Zhekov
the Telerik team

[Peter From LA]

I just deployed the latest version ( 2012.3.1308.40 ) and all my ribbons went wild with buttons wrapping with no rime and reason every time I switch tabs...

I was just about to deploy the app, but now I have to dig out the old DLL's from when the ribbon was working fine...

So, is the RibbonBar "officially" fixed?

[Ivan Zhekov]

Hi, Peter.

The ribbon behaviour was indeed fixed and the fix was released as a part of 2012 Q2.

If possible, could you open a ticket and attach a sample of your project, or provide us with a live url so we could inspect it?

Regards,
Ivan Zhekov
the Telerik team

[Peter From LA]

So, you claim that if I use width="100%" for the RibbonBar it will follow the resizing of the browser and it will not distort the buttons?

Before you answer, this is the behavior I observe:

1. I start the application on a normal browser (not maximized)
2. The ribbon bar covers the top of my page as expected;
3. I double click to maximize the browser
4. The ribbon bar remains the same size as before
5. I double click to normalize the browser
6. The ribbon bar appears to grow to the size of the maximized browser while the window itself is normal - this produces a horizontal scrollbar
7. While repeating this test it appears that the ribbon bar is one step behind when resizing itself - maybe it is grabbing the old size of the browser window from the event args (???)
8. Also when resizing the bar "decides" if it should use Small, Medium or Large buttons, and I cannot seem to be able to figure out a pattern.

This is not how the ribbon bar worked before I started using the latest version.

What was fixed (or needed to be fixed) that made you guys play with the ribbon?

[Ivan Zhekov]

Hi, Peter.

I am attaching a sample page I am using when testing resizing. In the archive you will find two screenshots depicting my browser window on very low resolution (800x600) and maximized to the full resolution (FHD 1920x1080).

On the resizing algorithm:

1) The minimum width is set:
-- the combined width of the tabs (only the tabs) is cached
-- for each tab, the groups are counted and some default minimum width is cached
-- the greater of the two above is chosen and the ribbon will not resize further than that
2) buttons are arranged in their specified size
3) a measuring is performed to determine if groups can fit in the current view
4) if the groups do not fit:
-- starting from right to left each group reduces the size of the medium buttons to small
-- for each re-flown group, if the new combined width is enough, the resizing stops
-- if groups still do not fit the large buttons are resized to medium; if there is only one large button, group is skipped
-- same stop resizing policy applies
-- the now medium previously large buttons are resized to small
-- same stop resizing policy applies
-- group is collapsed

It should be noted that prior all that the so called auto arrange happens, which groups the buttons in a way that's possible to perform the resizing algorithm in a predictable fashion. The auto arrange groups the buttons (and items as a general) based on their type and size: large buttons firs, then medium, then small, then the rest of the items in the order of appearance in the DOM.

Developers also have the option to specify such sub-group-level grouping by using the ControlGroup elements.

To further extend the above rule "if there is only one large button", it applies per control group. So it's safe to say that developers can arrange buttons in such a way that large buttons will remain large until the group is collapsed.

If you have more questions on the resizing algorithm, or the auto arrange algorithm, i will be happy to help.

Regards,
Ivan Zhekov
the Telerik team