当前位置: 动力学知识库 > 问答 > 编程问答 >

asp.net - Infragistics WebDataMenu delayed formatting in Chrome

问题描述:

Consider following basic markup for Infragistics WebDataMenu

 <ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px" StyleSetName="Office2007Blue" EnableTheming="True">

<ClientEvents Initialize="myInit" />

<GroupSettings Orientation="Horizontal" />

<Items>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

<ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>

</Items>

</ig:WebDataMenu>

<script>

function myInit() {

alert(1);

}

</script>

It's a pretty basic markup that defines 10-item horizontal menu with a limited width, so scrolling is enabled. The alert in "Initialize" event indicates part where calculation based on initialized menu dimensions are performed.

When this markup runs in IE or FF - the menu appears properly formatted before alert is displayed

But in chrome it appears unformatted

This causes issues if positions and dimensions of other elements on the page depend on menu ones. Ultimately menu reassesses itself (in the example above when user click OK on alert) but at that time is too late. Any idea what causes it and how to work around it?

网友答案:

After digging a while I realized that in Chrome and only in Chrome for some reason when menu Initialize event fires – menu hasn’t finished initializing yet. So the solution is to put code that uses the menu dimensions (or in our case – the test alert) into an event that happens long after. I tested it with window.load event and it seems to do the trick. Remove client event Initialize="myInit" in the above markup and add following to the JavaScript:

$addHandler(window, 'load', function () {
   setTimeout(myInit, 1)
});

This fixes the code issue, but you still see a brief jump when menu resizes itself. The solution to this is to set height of the menu, this can be done via CSS if you don’t want to hardcode it. Add CssClass="topMenu" to the menu properties in the markup and following CSS to the page:

.topMenu {
   height:28px;
}

This combined with code above fixes the Chrome issue in WebDataMenu with scroll. Here’s complete markup with the solution:

<style type="text/css">
    .topMenu {
        height:28px;
    }
</style>

<ig:WebDataMenu ID="WebDataMenu1" runat="server" Width="300px" CssClass="topMenu">
    <GroupSettings Orientation="Horizontal" />
    <Items>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
        <ig:DataMenuItem Text="Root Item"></ig:DataMenuItem>
    </Items>
</ig:WebDataMenu>

<script>
    function myInit() {
        alert(1);
    }

    $addHandler(window, 'load', function () {
        setTimeout(myInit, 1)
    });
</script>

From Code Corner.

分享给朋友:
您可能感兴趣的文章:
随机阅读: