jQuery UI Widgets Forums Angular jqxButton is not rendered properly in dialog window

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

Viewing 4 posts - 16 through 19 (of 19 total)
  • Author

  • Ivo Zhulev
    Participant

    Hi Liam,

    Use css to style the button:

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styles: [<code></code>
            jqxbutton span, jqxbutton img {
                position: relative !important;
            }
            jqxbutton span {
                top: 0 !important;
                left: 0 !important;
            }
        <code></code>],
        encapsulation: ViewEncapsulation.None
    })

    Best Regards,
    Ivo

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


    Liam
    Participant

    Hello, Ivo.
    Thank you for answer.

    This fix works for button inside the window, but spoils buttons outside the window ( even if to create those buttons manually )

    
    <jqxWindow #window
               [autoOpen]="false"
               [isModal]="true"
               [resizable]="false"
               [width]="640"
               [height]="480">
    
      <div>
        <jqxButton #button1 [auto-create]="false" (onClick)="closeWindow()"></jqxButton>
      </div>
    </jqxWindow>
    
    <jqxButton #button2 [auto-create]="false" (onClick)="openWindow()"></jqxButton>
    
    <br/>
    
    <jqxButton
      #textImageButton
      [width]='120'
      [height]='40'
      [textImageRelation]='"imageBeforeText"'
      [textPosition]='"left"'
      [imgSrc]='"/assets/close.png"'
      (onClick)="openWindow()">
      Button3
    </jqxButton>
    
    
    export class AppComponent implements AfterViewInit {
      @ViewChild('window')
      window: jqxWindow;
    
      @ViewChild('button1')
      button1: jqxButtonComponent;
    
      @ViewChild('button2')
      button2: jqxButtonComponent;
    
      ngAfterViewInit(): void {
        this.button1.createComponent({
          width: 194,
          height: 32,
          textImageRelation: 'imageBeforeText',
          imgPosition: 'center',
          textPosition: 'left',
          imgSrc: '/assets/close.png',
          value: 'button1'
        });
    
        this.button2.createComponent({
          width: 194,
          height: 32,
          textImageRelation: 'imageBeforeText',
          imgPosition: 'center',
          textPosition: 'left',
          imgSrc: '/assets/close.png',
          value: 'button2'
        });
      }
    
      openWindow() {
        this.window.open();
      }
    
      closeWindow() {
        this.window.close();
      }
    }
    

    Thank you !


    Liam
    Participant

    I have found a solution. The jqxButtonComponent must be created in initContent() method.
    Important note about initContent() method. It must be declared as a class member and not as a typescript function. I think you should mention that in documentation.

    Wrong way :

      initContent() {
        this.closeWindowButton.createComponent();
      }

    Right way :

      initContent = () => {
        this.closeWindowButton.createComponent();
      }

    Working example :

    app.component.ts

    import {Component, ViewChild} from '@angular/core';
    import jqxWindow = jqwidgets.jqxWindow;
    import {jqxButtonComponent} from "jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons";
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      @ViewChild('window')
      window: jqxWindow;
    
      @ViewChild('closeWindowButton')
      closeWindowButton: jqxButtonComponent;
    
      openWindow() {
        this.window.open();
      }
    
      closeWindow() {
        this.window.close();
      }
    
      initContent = () => {
        this.closeWindowButton.createComponent();
      }
    }

    app.component.html

    <jqxWindow #window
               [autoOpen]="false"
               [isModal]="true"
               [initContent]="initContent"
               [resizable]="false"
               [width]="640"
               [height]="480">
    
      <div>
        <jqxButton
          #closeWindowButton
          [auto-create]="false"
          [width]='200'
          [height]='40'
          [textImageRelation]='"imageBeforeText"'
          [textPosition]='"left"'
          [imgSrc]='"/assets/close.png"'
          (onClick)="closeWindow()"
        >
          Close Window
        </jqxButton>
      </div>
    </jqxWindow>
    
    <jqxButton
      #textImageButton
      [width]='200'
      [height]='40'
      [textImageRelation]='"imageBeforeText"'
      [textPosition]='"left"'
      [imgSrc]='"/assets/close.png"'
      (onClick)="openWindow()">
      Open Window
    </jqxButton>

    Thank you for support !


    Ivo Zhulev
    Participant

    Hi Liam,

    Thanks for the feedback!

    Best Regards,
    Ivo

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

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.