aurelia-dialog 模态的主体尺寸不正确答案

【问题标题】：aurelia-dialog modal is incorrect size for bodyaurelia-dialog 模态的主体尺寸不正确
【发布时间】：2016-03-04 17:51:33
【问题描述】：

我一直在搞乱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被正确评估？

【问题讨论】：

标签： javascript html aurelia aurelia-dialog

【解决方案1】：

您可以像这样为ai-dialog标签添加宽度和高度样式：

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

【讨论】：

【解决方案2】：

我想我在尝试向对话框添加不同宽度的项目时发现了类似的东西。直到对话框被渲染后，宽度才知道。好吧，我认为这就是原因！

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

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

我知道我混合了 vw 和 em 测量值，并且可能有更好的方法 - 但它在这个应用程序中运行良好。我确信可能有一种“正确”的 Aurelia 方法可以让对话框重新渲染，但这对于我们的情况来说已经足够了。

FWIW 我还添加了一个“margin-top: 4em !important”，这样对话框就会出现在 Bootstrap 提供给我们的固定标题栏的正下方。

【讨论】：