aurelia-dialog modal is incorrect size for body

Question

I've been messing around with aurelia-dialog trying to get a modal dynamically populated with some information. I have some stuff working but the modal is the incorrect size for the data its displaying.

welcome.js

import {DialogService} from 'aurelia-dialog';
import {CmdModal} from './cmd-modal';

export class Welcome {  
    static inject = [DialogService];
    constructor(dialogService) {
        this.dialogService = dialogService;
    }

    OpenCmd(intName, opName, opDescription, parameters){

        var cmd = { "CmdName" : opName, "Description" : opDescription, "Params" : parameters};

        this.dialogService.open({ viewModel: CmdModal, model: cmd}).then(response => {
            if (!response.wasCancelled) {
                console.log('good - ', response.output);
            } else {
                console.log('bad');
            }
            console.log(response.output);
        });
    }

cmd-modal.html

<template>
    <ai-dialog>

        <ai-dialog-header>
            <h2>${cmd.CmdName}</h2>
        </ai-dialog-header>

        <ai-dialog-body>
            <p>${cmd.Description}</p>
            <b>Parameters</b>

            <div repeat.for="param of cmd.Params">
                <p class="col-md-6">${param.Key}</p>
                <p class="col-md-6">${param.Value}</p>
            </div>

        </ai-dialog-body>

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

cmd-modal.js

import {DialogController} from 'aurelia-dialog';

export class CmdModal {
    static inject = [DialogController];
    constructor(controller){
        this.controller = controller;
    }
    activate(cmd){
        this.cmd = cmd;
    }
}

When a link is clicked, a modal like the following is displayed:

As the image shows, the modal is the wrong size for the body and some of the text spills over the side. I think this is because cmd-modal.html is being rendered before the data for the repeater has been inserted.

Does anybody know how I could resize the modal to be the correct size for the body or delay the modal display until cmd-modal.htmlhas been correctly evaluated?

score 3 · Answer 1 · answered Mar 04 '16 at 09:51

3

You can add style for width and height to the ai-dialog tag like this:

<ai-dialog style="width:600px; height: 350px;">

answered Mar 04 '16 at 09:51

Katta

31
2

score 1 · Accepted Answer · answered Jan 11 '16 at 09:22

I think I found something similar to this when trying to add items of varying width to the dialog. The widths weren't know until after the dialog had been rendered. Well I think that is why!

In the end I added a CSS class on the ai-dialog element which included a general width setting and a media query.

...
width: 90vw;
@media (min-width: 46em) {
    width: 44em;
}
....

I know I mixed vw and em measurements and there's probably better ways - but it works well in this app. I'm sure there's probably a "correct" Aurelia way to get the dialog to re-render but this is ample for our situation.

FWIW I also added a "margin-top: 4em !important" so that the dialog would appear just below the fixed header bar that Bootstrap was providing us.

aurelia-dialog modal is incorrect size for body

2 Answers2