Trouble with Aurelia Dialog not displaying correctly

[si2030]

I have implemented a simple dialog initially to test the functionality. I have it working but for some reason it does not display the border or background. In fact, it appears to be missing all styles.

Its a dotnet CORE Aurelia project spun off from the CLI. I am running bootstrap 3.

Here is my view:

<template>
<ai-dialog>
    <ai-dialog-body>
        <h2>${message}</h2>
    </ai-dialog-body>

    <ai-dialog-footer>
        <button click.trigger="controller.cancel()">Cancel</button>
        <button click.trigger="controller.ok(message)">Ok</button>
    </ai-dialog-footer>
</ai-dialog>

here is my viewmodel:

    import { inject } from 'aurelia-framework';
    import { DialogController } from 'aurelia-dialog';

    @inject(DialogController)

    export class ClientDeletePrompt {
        public message: any;

        constructor(private controller: DialogController, private answer: any) {
            this.controller = controller;
            this.answer = null;

            controller.settings.centerHorizontalOnly = true;
        }

        activate(message: any) {
            this.message = message;
        }
    }

Here is how I have added it to my project via “boot.ts” (note that bootstrap is added here as well):

import "isomorphic-fetch";
import { Aurelia, PLATFORM } from "aurelia-framework";
import {
    Redirect,
    NavigationInstruction,
    Router,
    RouterConfiguration,
    Next,
    PipelineProvider
} from "aurelia-router";
import { HttpClient } from "aurelia-fetch-client";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import "bootstrap";
declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build

import { AuthService } from "./services/auth/auth-service"

export function configure(aurelia: Aurelia, router: Router, ) {
    aurelia.use
        .standardConfiguration()
        .plugin(PLATFORM.moduleName("aurelia-validation"))
        .plugin(PLATFORM.moduleName("aurelia-event-aggregator"))
        .plugin(PLATFORM.moduleName("aurelia-bootstrap"))
        .plugin(PLATFORM.moduleName("au-table"))
        .plugin(PLATFORM.moduleName("aurelia-mask/masked-input"))
        .plugin(PLATFORM.moduleName('aurelia-dialog'));

Here is what I end up with:

Its suppose to have a border around the “Are you sure?”… and you can see the two buttoms below.

I had a quick look at the source and note that its suppose to also have CSS for this (eg for the “ai-dialog” tag) so I am unsure why, in my system etc its missing.

What am I missing and how do I get it to work as a normal dialog…

Any help much appreciated.

Simon

[bigopon]

Dialog went through a breaking change and ai-dialog should be ux-dialog. Can you try that and see if it styles correctly ?

[si2030]

Wow… yes it works… thank you…

[si2030]

I had a look at the source and noticed that the styles had not been updated for two years…

I have a question. It seems that the dialog is getting its styles from somewhere else other than bootstrap. I wonder if someone could tell me how the styles are working in dialog as I had a look at the source and noticed that the styles folder nothing had been updated for a couple of years… instead its using (I think a ux style?? given the tag name) - just curious.

[huochunpeng]

The style/input.less and style/output.css are NOT in use for ages. They should be removed from the code base.

The real css is here.

aurelia/dialog/blob/915e735ff7dc5c87e4ad0d9debf9aecd5f1d2927/src/dialog-configuration.ts#L21