jQuery UI Widgets Forums Grid grid header overlap asp.net popup menu in IE browser

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 6 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • Marina
    Participant

    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


    Dimitar
    Participant

    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/


    Marina
    Participant

    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");
    

    Dimitar
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.