Flyout and IE7

5 posts, 0 answers
  1. Alexandre Jobin
    Alexandre Jobin avatar
    125 posts
    Member since:
    Jan 2010

    Posted 10 Feb 2012 Link to this post

    Hi,

    I just encountered a bug with the Kendo Menu with IE7. If you align your menu to the right of the page, and for some reason you don't have enough place to display the entire sub-menu, the menu won't display correctly or at all.

    In the screen shot kendo-menu-ff.png we have the display i got in firefox.

    In he screen shot kendo-menu.png we have the display in IE7.

    With the IE Developper Tool bar I manage to see that the plugin creates two nested div to contain the animation. The first one, have the overflow property set to hidden and the second one, the nested one, was move to accommodate the lack of space to display it entirely. Hence the result shown earlier. (you can see it by your self with the two other screenshots kendo-menu- 2.pgn and kendo-menu- 3.png).

    Since the pluggin write those property directly at the element level, I can't correct it with CSS.

    I'm using the kendo-all.js.

    Here's my code to generate the menu but I doubt it's my implementation that is at cause. (Without Razor )
    <ul id="kendoMenu">
        <li><a href="/">Thèmes</a>
            <ul>
                <li<a href="/Rapports/HEB_QUE">Hébergement au Québec 1</a></li>
                <li><a href="/Rapports/ENT_FRO">Entrées à la frontière</a></li>
            </ul>
        </li>
     
        <li>domirich
            <ul>
                <li><a href="/Account/LogOff">Déconnexion</a></li>
            </ul>
        </li>
        <li>Pilotage
            <ul>
            <li><a href="/Pilotage/Autorisations">Gestion des autorisations</a></li>
            <li><a href="/Pilotage/Sources">Gestion des sources</a></li>
            <li><a href="/Pilotage/Concepts">Gestion des thèmes</a></li>
            </ul>
        </li>
    </ul>

    And here how I initialise the menu :
    <script type="text/javascript">
        $(document).ready(function () {
            $("#kendoMenu").kendoMenu(
            {
                direction: "bottom"
            });
        });
    </script>

    Please, tell me how to fix this.
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 13 Feb 2012 Link to this post

    Hello Alexandre,

    I tried in IE8 Compatibility mode and in real IE7 in a virtual machine, but I wasn't able to reproduce your issue the way you describe it. That said, we fixed recently the bug with two animation containers created in IE7 which was caused by the resize event in IE7 is being fired when document.body gets resized instead of the window as it should. I'm attaching a patch for kendo.popup.js which should resolve the issue, can you check if it fixes the artifacts too?

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Alexandre Jobin
    Alexandre Jobin avatar
    125 posts
    Member since:
    Jan 2010

    Posted 13 Feb 2012 Link to this post

    Hi Kamen,

    it's solved the problem.

    Thank's a lot
  5. Alexandre Jobin
    Alexandre Jobin avatar
    125 posts
    Member since:
    Jan 2010

    Posted 24 Feb 2012 Link to this post

    Update


    It appears that fly outs with IE7 have difficulties with the z-index.

    After extended look up we can see that the animation div have a z-index set to 10002 and a position set to Absolute.

    In IE7 mustn't we use position:relative to ensure that the z-index will be taken into account ?
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 28 Feb 2012 Link to this post

    Hello Alexandre,

    Unfortunately IE7's stacking order is broken and the z-index of an element depends on the z-indexes of the parents. Unfortunately there is no way to fix this automatically - the fix depends on the page layout. If you show me a sample of the issue, I can tell you how to fix it.

    Take a look here for more information.

    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready