[Editor] Dialogs opened from built-in toolbar tools are not responsive

[Jahrenski]

Describe the bug We are able to make the toolbar responsive for phones but the link popup dialog is not responsive and overflows the screen of a 350px phone even thought there would be enough space to display.

To Reproduce Use a small phone device or Chrome DevTools responsive tool down to 350px in width. Use the demo from https://www.telerik.com/kendo-angular-ui/components/editor/responsive-toolbar/ Add a link to display the popup and notice the absence of responsiveness.

Expected behavior The dialog should display in a responsive manner to support all kind of screen dimensions

Screenshots

Browser

• OS: Win10 x64
• Browser: Chrome
• Version: Latest. Any version or device will do this

[mbechev]

Hi @Jahrenski,

Let me provide a bit more details on this issue.

It seems that all Dialog components that are opened from Editor toolbar tools, are not responsive on mobile, and there is no built-in option for customizing its dimensions.

We will take a look and try to provide a solution for the discussed issue. Meanwhile, the below workaround could be used.

Workaround

The developer can set, width and height CSS styles to the Dialog dynamically, in the click handler of the Create Link button, e.g.:

  createLinkHandler() {
    this.zone.onStable.pipe(take(1)).subscribe(() => {
      let dialog: HTMLElement = document.querySelector(".k-dialog");
      dialog.style.width = "300px";
    });
  }

Here is an example: https://stackblitz.com/edit/angular-anqgyw-qt8v7c

[Jahrenski]

Thanks for the reply! This is indeed one way to hack it.

I chose the css way to override it's behavior using the ::ng-deep selector

::ng-deep app-editor-wrapper {

  //[HACK] Will fix for width bellow 450px. Difficult to override a float layout.
  @media only screen and (max-width: 450px) {
    kendo-editor {

      kendo-dialog {
        max-width: 100%;
    
        > .k-dialog {
    
          max-width: 100%;
    
          .k-content {
            padding: 0;
      
            .k-editor-dialog {
              padding-left: 0;
              padding-right: 0;
      
              .k-edit-form-container {
                padding-left: 10px;
                padding-right: 10px;
    
                form {
                  display: flex;
                  flex-wrap: wrap;
                }
      
                .k-edit-label {
                  margin-right: 15px;
                  width: 65px;
                }
    
                .k-edit-field:after {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}

In the end, I think that having a responsive toolbar makes users expect the whole component to be responsive in the end. I hope this will be addressed in the future.

[Jahrenski]

Also, the editor component needs a way to append its child popups and dialogs to a specified container. Otherwise, we get stacking context issues in an ionic application. Would love to see this addition.