aurelia-dialog modal对身体不正确的尺寸

我一直在与aurelia-dialog搞混，试图让一些模式动态地填充一些信息。我有一些工作的东西，但模式是它显示的数据的大小不正确。aurelia-dialog modal对身体不正确的尺寸

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

当点击一个链接，像下面的一个模式是显示：

正如图像所示，模态是身体的错误尺寸，一些文字溢出了侧面。我认为这是因为在插入中继器的数据之前被呈现。

是否有人知道如何将模态调整为正确的身体尺寸或延迟模态显示，直到被正确评估为止？

来源

2016-01-06 TomSelleck

我想我试图在对话框中添加不同宽度的项目时发现类似于此的内容。直到对话框渲染后，宽度才知道。那么我认为这就是为什么！

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

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

我知道我是混合VW和EM测量，可能有更好的方法 - 但它运作良好，在此应用程序。我确信可能有一个“正确的”Aurelia方式来让对话重新渲染，但这对我们的情况来说已经足够了。

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

来源

2016-01-11 09:22:33 shunty

可以为宽度和高度添加样式到AI-对话框标签是这样的：

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

来源

2016-03-04 09:51:33 Katta

aurelia-dialog modal对身体不正确的尺寸

回答

相关问题