This is a migrated thread and some comments may be shown as answers.

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

3 Answers 1665 Views
Dialog
This is a migrated thread and some comments may be shown as answers.
Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
Jyothi asked on 17 May 2019, 08:50 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Hetali
Telerik team
answered on 20 May 2019, 10:15 PM
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.
0
Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 23 May 2019, 02:00 PM

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

0
Hetali
Telerik team
answered on 23 May 2019, 03:38 PM
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.
Tags
Dialog
Asked by
Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Hetali
Telerik team
Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or