Simple dialogs do not support word-wrapping on strings that contain *very long* words

[peter-gergely-horvath]

Do you want to request a feature or report a bug?

Reporting a bug.

Feature Request

Bug Report

Apparently, Covalent Simple dialogs do not support word-wrapping on strings that contain very long words (without spaces). A word longer than certain threshold (lower case: about 50, Upper case: about 40 characters) cases the dialog to start displaying a vertical scroll bar.

While you usually have shorted words that say 40 characters, sometimes the application is displaying some kind of technical information (e.g. database table name, MQ queue name etc), which can exceed the threshold, after which it is not displayed correctly.

While one can argue this is not a bug, please consider the behaviour of a standard JavaScript 'alert()' method call, where even long words are wrapped properly.

I would expect something similar to happen when using Covalent Simple dialogs.

The following piece of code reproduces the behaviour -- again a ridiculously long string is not very common, but definitely can happen:

import { ViewContainerRef } from '@angular/core';
import { TdDialogService } from '@covalent/core';

export class FooBarComponent implements OnInit {

   
  constructor(...
              private _dialogService: TdDialogService,
              private _viewContainerRef: ViewContainerRef) { }

private openDialog() {
 this._dialogService.openConfirm({
          message: 'THISISAVERYLONGTEXTWHICHISNOTWRAPPEDINTHEDIALOGSATALL',
          disableClose: true,
          viewContainerRef: this._viewContainerRef,
          title: 'ISSUE DEMONSTRATION',
          cancelButton: 'CANCEL',
          acceptButton: 'OK',
        }).afterClosed().subscribe((accept: boolean) => {
          if (accept) {
            // ...
        });
  }
}

On Chrome, for instance, the following JavaScript code displays an alert box with the text broken into multiple lines.

alert('ThisIsAVeryLongTextThisIsAVeryLongTextThisIsAVeryLongTextThisIsAVeryLongTextThisIsAVeryLongTextThisIsAVeryLongTextThisIsAVeryLongTextThisIsAVeryLongTextThisIsAVeryLongTextThisIsAVeryLongText');

StackBlitz template: https://stackblitz.com/edit/covalent
Plunker template: http://plnkr.co/edit/7uZQn4mLNJkL6XN9WSNd

Screenshots or link to CodePen/Plunker/JSfiddle

What is the expected behavior?

• Dialogs should break extreme long words into multiple lines similarly to a standard alert() call
• And/Or dialogs should be sizeable from the API so as to be able to accommodate long content.

What is the motivation / use case for changing the behavior?

I had a case, where I wanted to display a confirmation dialog containing a technical / system generated name. The content was not visible in the dialog. I myself had to write the logic to add spaces to into long strings so that the dialog show them properly.

Which version of Angular and Material, and which browser and OS does this issue affect?

All versions affected AFAIK.

Did this work in previous versions of Angular / Material?

Other information

[emoralesb05]

We are going to do both things actually, making it so you can pass any MatDialogConfig when opening the dialog and making sure long words wrap also.

[emoralesb05]

#1059 will take care of this