jqxMenu inside jqxDocking window renders under window due to z-index issue

[jq-angular-tryParticipant]

Hello,

We are evaluating jqWidgets for use in our web application.

This is with jqwidgets-ng version 20.0.0 and Angular version 17.3.0 on Windows 10 with npm version 10.5.2 and node version v20.13.1

When using a jqxMenu inside of a jqxDocking window, when the dropdown menu is opened, it shows up underneath the jqxDocking window.

There is no error shown in the console. Instead, it appears to be caused by the z-indices of the divs created for the jqxDocking windows and divs created for the jqxMenu dropdowns. The jqxDocking windows have a higher z-index than the menus, and so the menus appear underneath the windows.

The reason we are using jqxMenu inside of a jqxDocking window is because the jqxDocking window is always on the top of the menu.

With the attached app.component files, you can run a sample that reproduces the problem. When you open the page, you will see a jqxMenu inside of a jqxDocking window. When you open either the File or Edit menus, you should see the dropdown menu render under the jqxDocking window.

app.component.html

<jqxDocking #myDocking [width]="'100%'" [mode]="'floating'" style="float:left;"
  [windowsMode]="{ 'window0': 'floating' }">
  <div style="overflow: hidden">
    <div id='window0' [style.width]="'300px'" [style.height]="'100px'">
      <div>Menu</div>
      <jqxMenu [width]="275" [height]="31" [autoOpen]="false" [clickToOpen]="true" [showTopLevelArrows]="true"
        [source]="records"></jqxMenu>
    </div>
  </div>
</jqxDocking>

app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import { jqxDockingModule, jqxDockingComponent } from 'jqwidgets-ng/jqxdocking'
import { jqxMenuModule } from 'jqwidgets-ng/jqxmenu'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, jqxDockingModule, jqxMenuModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('myDocking', { static: false }) myDocking!: jqxDockingComponent;
  title = 'jqw-jqxmenu-inside-jqxdocking-window';

  ngAfterViewInit(): void {
    let jsonStr = <code>{&quot;panel0&quot;: {},&quot;floating&quot;:{&quot;window0&quot;: {&quot;collapsed&quot;: false, &quot;x&quot;:&quot;10px&quot;,&quot;y&quot;:&quot;10px&quot;, &quot;width&quot;:&quot;300px&quot;, &quot;height&quot;:&quot;100px&quot;}},&quot;orientation&quot;: &quot;undefined&quot;}</code>;
    console.log(jsonStr);
    this.myDocking.importLayout(jsonStr);
    this.myDocking.showAllCollapseButtons();
    this.myDocking.showAllCloseButtons();
}

  data = [
    {
      'id': '100',
      'text': 'File',
      'parentid': '-1',
      'subMenuWidth': '100px'
    },
    {
      'text': 'Upload',
      'id': '101',
      'parentid': '100',
    },
    {
      'id': '102',
      'text': 'Import',
      'parentid': '100',
    },
    {
      'id': '200',
      'text': 'Edit',
      'parentid': '-1',
      'subMenuWidth': '100px'
    },
    {
      'id': '201',
      'text': 'Preferences',
      'parentid': '200',
    },
    {
      'id': '202',
      'text': 'Settings',
      'parentid': '200',
    },
    {
      'id': '203',
      'text': 'Details',
      'parentid': '200',
    },
  ];

  source =
    {
      datatype: 'json',
      datafields: [
        { name: 'id' },
        { name: 'parentid' },
        { name: 'text' },
        { name: 'subMenuWidth' }
      ],
      id: 'id',
      localdata: this.data
    };
  getAdapter(source: any): any {
    // create data adapter and perform data
    return new jqx.dataAdapter(this.source, { autoBind: true });
  };
  records = this.getAdapter(this.source).getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
}

[adminKeymaster]

Hi,

The popup z index can be controlled by using the Menu’s popupZIndex property. You can set it to a value like 9999999 in order to be sure it is on top of everything.

Best regards,
Peter Stoev

[Author]

Posts