How to set the size of the pop-up dialog rendered through DialogService

4 posts, 1 answers
  1. Jyothi
    Jyothi avatar
    33 posts
    Member since:
    Dec 2018

    Posted 17 May 2019 Link to this post

    Hi,

    We have a kendo-dialog that has a drop down and bunch of other fields like label and text etc. The requirement is that when the selection is changed in the drop down, another dialog needs to be popped up warning the user with a message.

    I was able to achieve this by using the DialogService. But the problem is I am not able to set the size of this dialog. It is way too long and occupies the entire height of the frame. Please see the attached file.

    When I inspect the html via developers tool, I can see that it is controlled by 

    .k-dialog-wrapper .k-dialog {
         position: relative; <----- If I change this to inherit, the size of the dialog is perfect. Please see image DialogServiceGood.
    }

    I tried setting the value like this in the css, but does not help at all.

    .k-dialog-wrapper.k-dialog {
                  position: inherit !important;
    }

    How can we achieve this? Any help is greatly appreciated.

    Here is the code to bring up the dialog using the service

    html:

    <kendo-dialog  class="xxxx" *ngIf="openedDialog" (close)="close('dialog')"  [minWidth]="250" [width]="700"  >
        <div  class="row-style" >  
            <div class="xx-ad-header" style="flex:10 ;" >
              {{title}}
            </div>
            <div  style="flex:1 ;"  class="button-right">
                <button type="button" class="btn btn-primary btn-close btn-circle" (click)="closeDialog()">
                  <span>X</span>
                </button>
              </div>
          </div>
          <div   kendoDialogContainer ></div>
      
      ... the rest here
    </kendo-dialog>

    component class

     public popupConfirmation() {
        const dialog: DialogRef = this.dialogService.open({
            title: 'Please confirm',
            content: 'Data entereed will be lost. Do yoy wish to zontinue?',
            actions: [
                { text: 'No' },
                { text: 'Yes', primary: true }
            ],
            width: 250,
            height:200,
            minWidth: 250
        });

        dialog.result.subscribe((result) => {
            if (result instanceof DialogCloseResult) {
                console.log('close');
            } else {
                console.log('action', result);
            }

            let aresult = JSON.stringify(result);
            
        });
      }

    Regards,

    Jyothi

  2. Answer
    Hetali
    Admin
    Hetali avatar
    34 posts

    Posted 20 May 2019 Link to this post

    Hello Jyothi,

    Thank you for the code snippet and the snapshot. On replicating the issue with the code provided by you, the height of the second Dialog box is setting to the desired value through the DialogService on my end.

    Please take a look at this StackBlitz example that pop opens the second Dialog box to the desired height when we change the DropDownList selection.

    Could you please check if you have all the modules imported? If you continue to face this issue, please update the StackBlitz example replicating your issue, and I will investigate further.

    Regards,
    Hetali
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Jyothi
    Jyothi avatar
    33 posts
    Member since:
    Dec 2018

    Posted 23 May 2019 in reply to Hetali Link to this post

    Hi Hitali, 

    Thanks for the quick response. I did have the code just like what you have. I moved it to a stand alone test program and it worked. 

    Regards,

    Jyothi

  4. Hetali
    Admin
    Hetali avatar
    34 posts

    Posted 23 May 2019 Link to this post

    Hi Jyothi,

    Thank you for the update. I am glad that it's working fine.

    Based on your post, I believe that you do not require any further assistance. Thus, I am closing this ticket. However, if any further questions regarding the topic arise, do not hesitate to reopen it by writing back.

    Regards,
    Hetali
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top