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

Kendo Dialog not showing correctly in Safari on Mac

3 Answers 483 Views

Dialog

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

schakravarty asked on 21 Jul 2020, 05:55 PM

We have an application we are developing and are using the Kendo Dialog to wrap some of our screens. You can see it in action at https://tropicos.org. Many of our users are using Safari 13 on a Mac and have reported problems where the dialogs are clipping off the bottom when the view it overlays is smaller than the dialog itself. We are also experiencing problems where the dialog gets "tucked" under the header of the app cutting off the top of the dialog. One of the dialogs in question is the login dialog. I know we can use the service to control much of the features of the dialog however do not see why we should have to go back and refactor all of the screens that use dialogs to do so. They do behave correctly on chrome on the Mac and I would expect the behavior that works on chrome to also work the same for Safari on the Mac machine. Is anyone else having the problem or is there an easier solution for this than refactoring all of our dialogs to use a service so we can control the position and what it container it appends to?

I do not have access to a Mac to test all of my changes so it is very frustrating when the expected behavior would be the same across browsers.

3 Answers, 1 is accepted

Accepted

answered on 23 Jul 2020, 07:44 AM

Hi Paul,

It is hard to tell the main cause for the undesired behavior under Safari, but it seems to be both browser-specific, and also caused by inserting the Dialog in multiple Material containers (mat-sidenav-container, mat-sidenav-content) with their specific styling applied that interferes with the Dialog styling.

We also have an opened issue in our themes repo for an enhancement that will disable page scrolling when the Dialog is opened:

https://github.com/telerik/kendo-themes/issues/1000

The current workaround is to add "overflow: hidden" to the body element when the Dialog is opened, and remove it when closing the Dialog, e.g.:

public close(status) {
      console.log(`Dialog result: ${status}`);
      this.opened = false;
      document.body.style.overflow = "";
    }

    public open() {
      this.opened = true;
      document.body.style.overflow = "hidden";
    }

Also, removing the overflow CSS rule of the .mat-drawer-container element:

... and the relative position of the .mat-drawer-content element:

...seems to yield the desired result:

You can confirm that a standalone Dialog component when not placed within multiple other components with custom styling, is behaving consistently both in Safari and Chrome:

https://stackblitz.com/edit/angular-eufuep?file=app/app.component.ts

Also here is another screenshot taken after removing the Material containers - related styles from the DOM (by deleting to STYLE nodes from the <head></head> tag content):

I hope overwriting some of the conflicting styles will help resolve the issue, but given the provided information, there is not much what we can do on our end to address the discrepancies of the layout between Chrome and Safari that material containers cause.

Alternatively, placing the Dialog on a higher level in the hierarchy so that it is not enclosed in material elements can also help.

Regards,
Dimiter Topalov
Progress Telerik