Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1360
Vertical Menu Flyout Corrupts Display
posted

I have a vertical IG menu in a left-of-page <div>, the ID of which identifies the CSS style. It has a single pixel right border and a light grey background:

When I click on a top-level node that has a child item, the screen is re-rendered thus:

The black border has disappeared below the menu flyout and the grey background has turned white in the <div> area below the menu.

The following pertains:

  • The menu is on a Master Page (probably not relevant, but I'm in straw-clutching territory on this one)
  • The styles are largely defined by an external CSS file
  • The above problem does not occur every time (about 70%)
  • The above problem does not appear to be related to the type of menu ExpandEffect. I have tried: [Slide], [Fade] and [Not Set].
  • The menu is populated dynamically via C# program code. The menu is not directly bound to a data source, rather, a program reads records from a database table and uses them to populate the menu via Node.Add method calls.
  • The menu is populated on the initial Page Load event of the containing page
  • In all other regards, the menu appears to be behaving as expected.

Here is the declaration of the menu:

<div id="leftnavbar">
 
<ignav:UltraWebMenu ID="LeftMenu" runat="server" CssClass="vertMenu"
    BorderCollapse="True" ExpandEffects-Type="Slide" WebMenuTarget="VerticalMenu">
    <Images><XPSpacerImage Width="1px"/></Images>
    <ExpandEffects Type="NotSet" ShadowColor="#888888"></ExpandEffects>
    <MenuClientSideEvents ItemClick="LeftMenu_ItemClick"></MenuClientSideEvents>
  </ignav:UltraWebMenu>
</div>

Here is the definition of the CSS style that defines the containing <div>:

leftnavbar {
 position: absolute;
 left: 0em;
 top: 90px;
 font-size: small;
 font-weight: normal;
 width: 225px;
 border-right: 1px solid Black;
 float: left;
 padding-left: 0px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 height: 100%;
 background-color: #e3e6eb;
 text-align: left;
 margin: 1px;
}

Any suggestions or assistance would be gratefully received.

Kind regards

Paul

MS VS2008 Pro. IG for Web 2008v1. C#

  • 1360
    Verified Answer
    Offline posted

    Found it.

    There must be something about describing a problem in simple terms that triggers the "solution centre" in one's own brain.

    This is the CSS style for the menu itself.

    .vertMenu
    {    width: 225px;
        text-align: left;
        color: #333333;
        background-color: #E3E6EB;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: x-small;
        font-weight: bold;
        border: none;
        z-index: 888888;
        margin: 0px;
        padding-left: 5px;
    }
    Notice that the width is exactly the same as for the containing <div>.

    So, make the menu width 224 rather than 225 so that it fits within the <div> and the problem goes away. Obvious really. Needless to say, I feel a bit of a chump. Nonetheless,I hope that this posting may help someone else with the same issue.

    Paul