Aurelia-dialog - "Styling The Dialog" documentation not working for me

Help Requests
1

I am using aurelia-dialog and trying to override the default CSS but I am not having any luck following the “Styling The Dialog” documentation.

In my main.js file I have:


export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-animator-css'))
    .plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
      config.settings.startingZIndex = 5;
      config.settings.keyboard = true;
      config.useDefaultSettings()
        .useCSS('_dialog.scss');
    });

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

But I am getting an error in the browser:

bluebird.js?f684:5290 
TypeError: config.useDefaultSettings is not a function
...

Any suggestions?

1 Like
2

Where did you get config.useDefaultSettings()? It’s not in the doc.

This is what I use. I cleanup the css, and define dialog styles in my app’s scss file.

config.useDefaults();
config.useCSS('');

BTW .useCSS('_dialog.scss') would not work, you need to pass a piece of css text to the call. But it looks like you should do the same thing I did, just load your _dialog.scss in app’s main css.

2 Likes
3

Thanks @huochunpeng. I got the useDefaultSettings() from the Aurelia docs https://aurelia.io/docs/plugins/dialog#styling-the-dialog. I guess it was an error on my part to assume cfg.useDefaultSettings() was just another way to write config.useDefaultSettings().

And thanks for the note that .useCSS('_dialog.scss') wouldn’t work. I totally overlooked the fact that the SASS would not be compiled. Or at least that I what I am assuming after reading your comment.

I have added the dialog styles to my base styles as you suggested. Thanks!

1 Like
4

That’s a doc bug, or outdated doc. Will fix it.

3 Likes