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對身體不正確的尺寸

回答

相關問題