New RadRibbonBar and Width="100%"

8 posts, 0 answers
  1. Alain
    Alain avatar
    33 posts
    Member since:
    Feb 2009

    Posted 18 Jun 2012 Link to this post

    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
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 20 Jun 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alain
    Alain avatar
    33 posts
    Member since:
    Feb 2009

    Posted 29 Jun 2012 Link to this post

    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
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 02 Jul 2012 Link to this post

    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
    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.
  6. Peter From LA
    Peter From LA avatar
    35 posts
    Member since:
    May 2005

    Posted 15 Jan 2013 Link to this post

    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?
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 17 Jan 2013 Link to this post

    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
    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.
  8. Peter From LA
    Peter From LA avatar
    35 posts
    Member since:
    May 2005

    Posted 19 Jan 2013 Link to this post

    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?

  9. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 23 Jan 2013 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017