jqxLoader over jqxWindow

[LiamParticipant]

Hello, I’m using a jqxLoader and jqxWindow. When the window is opened, jqxLoader doesn’t cover a window.
I’ve tried to use a jqx-shadow style with z-index, but it didn’t work.
Here is my code.
Thank you !

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['
    .jqx-shadow {
      z-index: 9999 !important;
    }
  '],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
}

app.component.html

<jqxLoader #loader [isModal]="true"></jqxLoader>

<jqxWindow #loginWindow [isModal]="true" [autoOpen]="true" [width]="500" [height]="250">
  <div>
    Login
  </div>

  <div>
    <input type="button" value="Login..." (click)="loader.open()">
  </div>
</jqxWindow>

[StanislavParticipant]

Hello Liam,

When I changed the CSS selector from:.jqx-shadow to .jqx-loader it worked fine.
The loader came up, in front of the window.

Best Regards,
Stanislav

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

[LiamParticipant]

Hello, the loader has come up, but it doesn’t cover a whole window. Even I can move the window and close it while loader is running.
Attaching a screen shot : https://ibb.co/jpPDHx
Thank you !

[StanislavParticipant]

Hello Liam,

I used CSS to style the window and loader(plus their modals).
Here is an example of how I did it:

.jqx-laoder {
    z-index: 102 !important;
}

.jqx-loader-modal {
    z-index: 101 !important;
}

.jqx-window {
    z-index: 100 !important;
}

.jqx-window-modal {
    z-index: 99 !important;
}

It works fine like this, you can’t click on the window(drag it or close it).

Best Regards,
Stanislav

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

[LiamParticipant]

Works fine !
Thank you !

[Author]

Posts