jQuery UI Widgets Forums Angular jqxLoader over jqxWindow

This topic contains 4 replies, has 2 voices, and was last updated by  Liam 3 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqxLoader over jqxWindow #99261

    Liam
    Participant

    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>
    jqxLoader over jqxWindow #99263

    Stanislav
    Participant

    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/

    jqxLoader over jqxWindow #99274

    Liam
    Participant

    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 !

    • This reply was modified 3 years, 2 months ago by  Liam.
    jqxLoader over jqxWindow #99292

    Stanislav
    Participant

    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/

    jqxLoader over jqxWindow #99293

    Liam
    Participant

    Works fine !
    Thank you !

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

You must be logged in to reply to this topic.