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