Dialog width

[bmdietrich]

Is there a simple way to adjust dialog widths on a per dialog basis? Right now, we're adjusting a custom dialog using the following method...

`changeWidth() {

setTimeout(() => {
  let dialogEls = document.getElementsByClassName('mdl-dialog');
  let elements = Array.prototype.filter.call(dialogEls, (dialogEl) => {
    if (dialogEl.nodeName === 'MDL-DIALOG-HOST-COMPONENT') {
      let hostComp = dialogEl.lastChild;
      if ((hostComp || {}).nodeName === 'CUSTOM-DIALOG-CMP') {
        return true;
      }
    }
  })
  elements.forEach(el => {
    el.style.width = '500px';
  });
});

}`

We're looking for a cleaner option. Any help would be greatly appreciated.

[mseemann]

right now there is not. The dialog width is a preset from material-design-lite. from the sources:

/* Dialog */

@mixin dialog-width($units:5) {
  @if(type_of($units) != 'number') {
    @error "The unit given to dialog-width should be a number.";
  }
  // 56dp is the base unit width for Dialogs.
  // With 5 units being the number of units for a mobile device.
  // https://material.google.com/components/dialogs.html#dialogs-simple-dialogs
  width: $units * 56px;
}

your case looks like you want to change the width for all dialogs. you can do this with css if this is done after the mdl-css is loaded

.mdl-dialog {
   width: 500px;
}

[bmdietrich]

I created a fork and made the changes that would allow devs the ability to pass a custom inline width for both declarative and imperative dialogs.

This may not meet the contribution requirement 3, but it is a useful feature. I can create a pull request if your interested.

Again, thank you for your awesome work.

[mseemann]

Hi, thx for your work! I've checked out your branch and took a look. We can do so. My concern is that the next one wants to set a css class to the host component or do some other things more than setting the width. So a more general solution would be great. I already have a branch with some experiments (176b24e) maybe you can check this out too. The main idea is to give the user access to the HostDialogComponent via the mdldialogreference. Let me know what you think.

[mseemann]

version 2.2.0 now contains the possibility to specify any styles you want + a lot more configuration options. I took your approach to extend the config file. thx for putting pressure on this issue 😉

[bmdietrich]

I apologize for the delayed response, busy weekend.

Thank you for the new 2.2.0 styles feature. This will definitely help me with specific dialog needs.

[mseemann]

👍