grid header overlap asp.net popup menu in IE browser

[MarinaParticipant]

I have asp.net menu in asp.net master page with popup items and I have grid widget in content page when menu items popping down grid header always overlapping it in IE browers(Chrome is working fine). I tried to set z-index of menu and level menu to very high number(99999999) and I tried to set z-index of jqx-grid-column-header to 0( $(‘#jqxgrid’).find(“.jqx-grid-column-header”).css(“z-index”, “0 !important”);) but nothing is fixing it. The only its not overlapping if I am setting jqx-grid-column-header position to relative on hover of menu, but then it has effect that all column headers are collapsed in one.
here is menu in master page:

 <div class="col grid_12_of_12  orange"  id="nav_menu" >

      
        <asp:Menu ID="Menu" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
            StaticEnableDefaultPopOutImage="false"
            OnMenuItemDataBound="OnMenuItemDataBound"   
            staticdisplaylevels="1"
            staticsubmenuindent="0" 
            StaticSelectedStyle-CssClass="selectedmenuitem"
            >
            <LevelMenuItemStyles>
                <asp:MenuItemStyle CssClass="main_menu" />
                <asp:MenuItemStyle CssClass="level_menu" />
             </LevelMenuItemStyles>
            </asp:Menu>
      <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" SiteMapProvider="DispatchPlusMCSiteMap"/>
      </div>

here is style I’m using for menu:
/* menu */

            
.main_menu

    {

        width:auto;

        background-color: #F26223;

        color: #FFFFFF;

        text-align: left;

        height: 45px;
        
        margin: 0px 10px 0px 5px;
        
        font-family:'Lato' , Verdana !important;
        
        font-size:16px;
        
        vertical-align:middle;
        
      
      
    }
    
    #nav_menu img{padding-right: 5px; }

	#nav_menu {z-index: 999999999;}

            
    .level_menu

    {

        width: 200px;

        background-color: #434953;

        color: #FFFFFF;

        text-align: left;
        
        vertical-align:middle;

		padding:10px 0 6px 5px;
		
        height: 25px;
        
        line-height: 15px;
        
		font-family:'Lato', Verdana !important;
      
        font-size:14px;
       
		margin:0 0 0 0px;
		
		border-bottom: 0px solid  #ACB3BF;
		
		z-index: 999999999;
    }
    
  

    .selectedmenuitem

    {
		width:auto;
        background-color: #c9501b;
        color: #FFFFFF;
        text-align: left;
        height: 45px;
        margin: 0px 10px 0px 5px;
        font-family: 'Lato', Verdana !important;
        font-size:16px;
        vertical-align:middle;
    }
   

and here is content for page with grid

  <div id="messagesPanel" class="section group">
      
             <div id="messagesWindow" >
                <div class="darkgray">
                    <div class="col grid_10_of_12 header1" >COMMUNICATIONS</div>
                    <div class="col grid_2_of_12">
                        <select id="ddlSwitchDisplay">
                            <option value="1">Account Calls</option>
                            <option value="2">Account Messages</option>
                        </select>
                    </div>
                    
                </div>
               
                <div id="jqxgrid" ></div>
                  
            </div>
         
          
    </div> 

            //grid control
            $("#jqxgrid").jqxGrid(

            {
                width: '100%',
                source: dataAdapter,
                autoheight: true,
                sortable: true,
                filterable: false,
                pageable: false,
                altrows: true,
                theme: 'dpgray',

                columns: [
                  { text: 'Account', datafield: 'CompanyName', width: '15%' },
                  { text: 'From User', datafield: 'FromUserName', width: '15%' },
                  { text: 'To User', datafield: 'ToUserName', width: '15%' },
                  { text: 'From Radio', datafield: 'FromRadio', width: '10%' },
                  { text: 'To Radio/Group', datafield: 'ToRadio', width: '10%' },
                  { text: 'Duration', datafield: 'DurationSec', width: '10%' ,
                      rendered: function (header) {
                          header.css("text-align", "center");
                          
                      }
                  },
                  { text: 'Call Type', datafield: 'CallType', width: '10%',
                      rendered: function (header) {
                          header.css("text-align", "center");
                         
                      }
                   },
                  { text: 'Date And Time', datafield: 'ReceivedDisplayTime', width: '15%', cellsformat: 'MM/dd/yyyy hh:mm:ss tt'
                      , cellsrenderer:
                      function (row, column, value) {
                          
                          var parsedDate = new Date(parseInt(value.substr(6)));
                          var formattedValue = $.jqx.dataFormat.formatdate(parsedDate, 'MM/dd/yyyy hh:mm:ss tt')
                          return formattedValue;
                      }

                  }
                 
              ]

            });

Thanks,
Marina

[DimitarParticipant]

Hello Marina,

It is not necessary to set the z-index of the grid’s headers, only that of the ASP menu (please try increasing the value for ids nav_menu and Menu, and the classes main_menu and level_menu).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[MarinaParticipant]

Hi,
I tried increase z-index of nav_menu and Menu to 99999999 and it did not work. Actually I found solution how to set grid z-index to 0 – you have to first to set css position of grid to relative.

$('#jqxgrid').css("position", "relative");
$('#jqxgrid').css("z-index", "0");

[DimitarParticipant]

Hi Marina,

Does this mean your issue is resolved? One thing that may be in play in your scenario is difference in the stacking context. For more information, you can refer to the following MDN help topic: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts