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

Flyout and IE7

4 Answers 180 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Alexandre Jobin
Top achievements
Rank 1
Alexandre Jobin asked on 10 Feb 2012, 09:01 PM
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.

4 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 13 Feb 2012, 10:57 AM
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!
0
Alexandre Jobin
Top achievements
Rank 1
answered on 13 Feb 2012, 01:51 PM
Hi Kamen,

it's solved the problem.

Thank's a lot
0
Alexandre Jobin
Top achievements
Rank 1
answered on 24 Feb 2012, 07:34 PM
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 ?
0
Kamen Bundev
Telerik team
answered on 28 Feb 2012, 03:40 PM
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!
Tags
Menu
Asked by
Alexandre Jobin
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Alexandre Jobin
Top achievements
Rank 1
Share this question
or