How to move the dialog when PC chrome browser window width is small

[lorryl]

Hi,

The dialog minwidth is 800, when drag the chrome browser width size to 700, I cannot drag the dialog to show the dialog completely, and the dialog has no x scroll bar to see the right part, what should I do?

[Vinitha Jeyakumar]

Hi lorryl,

Currently, we are validating your reported query. we will update you the further details on or before 18^th August 2022.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi lorryl,

Your reported issue can be resolved by enabling horizontal scroll bar to the body element by customizing the below CSS styles code.

Code snippet:

.e-popup.e-popup-open.e-dialog {

  min-width: 800px;

}

.e-dlg-overlay {

  position: fixed !important;

}

.e-dlg-container {

  position: absolute !important;

}

.e-dlg-target.e-scroll-disabled {

  overflow: auto !important;

}

.e-popup.e-popup-open.e-dialog {

  max-height: 1200px !important;

  left: 200px !important;

  top: 100px !important;

  position: absolute !important;

}

Sample: https://stackblitz.com/edit/angular-d4e3dj-4aiwap?file=app.component.css

Regards,

Vinitha

[lorryl]

It works, thanks.

Another question, I have a splitter, fill the width.

When I open the dialog that has min-width,  the bottom level splitter not auto fill the width when draging the scrollbar. Any idear?  I have a demo.

Attachment: demo2_8950680b.rar

[Vinitha Jeyakumar]

Hi Lorryl,

Your reported issue can be resolved by setting position as fixed to the splitter element. please check the sample and code below,

Code snippet:

.e-splitter.e-splitter-horizontal,

.e-splitter.e-splitter-vertical {

  position: fixed !important;

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/demo2_8950680b-1769692741

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.

Regards,

Vinitha