Dialog positionning not working

[thibault fouillat]

Hello,

I would like to set a position for my dialog. Currently, the dialog is positionned center top : position: { X: 'center', Y: 'top' },

I need a margin-top of 40px, so I tried what I found in your documentation:
     position: { X: 'center', Y: '40' }, => not working

     position: { X: 'center', Y: '40px' }, => not working

     position: { X: 'center', Y: 40 }, => not working

full javascript of the dialog:

var dialogObj = new ej.popups.Dialog({

        header: nameFamilleLien,

        content: '<div id="gridLienMultiple' + tableOrFamillyId + '"></div>',

        showCloseIcon: true,

        target: document.getElementById('partial'),

        width: '80%',

        height: 'auto',

        position: { X: 'center', Y: 'top' },

        allowDragging: true,

        close: function () {

            dialogObj.destroy();

            $("#destinationModalLink" + tableOrFamillyId).remove();

        }

    });

Is that a bug or am I doing something wrong ?

Regards,

Thibault

[Karthikeyan Viswanathan]

HI Thibault, 

Thanks for contacting Syncfusion support. 

Currently, we doesn’t have a support of accepting Enum and offset value combination in Dialog’s position API. You should use either enum values or offset values for both axis. 

We will consider this requirement as an improvement in dialog component and it will be implemented in our upcoming service pack release. So, we suggest you to use offset values to position the dialog. 

 

Please refer the below code example: 

<code> 

var dlgObj = new ej.popups.Dialog({ 

        header: 'nameFamilleLien', 

        content: '<div id="gridLienMultiple"></div>', 

        showCloseIcon: true, 

        target: document.getElementById('partial'), 

        width: '80%', 

        height: 'auto', 

        position: { X: 50, Y: 100 }, 

        allowDragging: true, 

        close: function () { 

            dialogObj.destroy(); 

            $("#destinationModalLink" + tableOrFamillyId).remove(); 

        } 

    }); 

    dlgObj.appendTo('#dialog'); 

 

</code> 

Sample link: https://stackblitz.com/edit/js-xknies?file=index.js  

Regards, 

Karthikeyan V.  

[joe buttler]

You have to enable the dialog box in the form and have to make it drag and drop, then it will be changed. By the process I told you just by which you can position of the dialog box can work. I was doing the project of the HP support number and I have to change the position of the dialog box.

[Karthikeyan Viswanathan]

Hi Joe, 

 

We have prepared a sample based on your requirement. In the sample,  we have given min-height for dialog target to showing draggable support while given position value. After dragged dialog, you can retain it’s an initial position by using refreshPosition() method. 

 

Please let us know if we misunderstood your issue. 

 

API Reference: https://ej2.syncfusion.com/documentation/dialog/api-dialog.html?lang=typescript#refreshposition  

 

Demo sample: https://stackblitz.com/edit/tpajdv  

 

 

Regards, 

Karthikeyan V.