javascript-aurelia-dialog模态的身体尺寸不正确

我一直在搞aurelia-dialog,试图用一些信息动态填充模态.我有一些可用的东西,但是模式是其显示数据的大小不正确.

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;
    }
}

单击链接时,将显示如下所示的模式：

如图所示,模态是错误的主体尺寸,一些文本溢出到侧面.我认为这是因为在插入中继器的数据之前已渲染cmd-modal.html.

有人知道我如何将模态调整为适合人体的正确大小,或将模态显示延迟到正确评估cmd-modal.html之前？

最佳答案

我想在尝试向对话框中添加宽度不同的项目时发现了与此类似的内容.在渲染对话框之后才知道宽度.好吧,我认为这就是为什么！

最后,我在ai-dialog元素上添加了一个CSS类,其中包括常规宽度设置和媒体查询.

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

我知道我将大众和em的测量值混合在一起了,也许还有更好的方法-但是在此应用程序中效果很好.我敢肯定,有一种“正确”的Aurelia方法可以使对话框重新呈现,但这对于我们的情况已经足够了.

FWIW我还添加了一个“ margin-top：4em！important”,以便该对话框出现在Bootstrap为我们提供的固定标题栏的正下方.