2016-11-18 60 views
1

我一直在某種形式上使用bootstrap模態。我從this教程中瞭解到創建模態。對於我之前的項目,我對模態沒有任何問題。但是對於我目前的項目來說,模態組織並沒有完全覆蓋模態內容。這裏的截圖 enter image description here 我現在通過參考this解決了這個問題。我無法弄清楚什麼可能導致身高問題。Yii2模態高度問題

我認爲文件中的代碼

<div class="collection-type-index"> 



<h1><?= Html::encode($this->title) ?></h1> 
<?php // echo $this->render('_search', ['model' => $searchModel]); ?> 

<p> 
    <?= Html::button('Create Collection', ['value' => Url::to('index.php?r=settings/collectiontype/create'), 'class' => 'btn btn-success', 'id' => 'modalButton']) ?> 
</p> 

     <?php // Modal for create 
      Modal::begin([ 
        'header'=>'Collection Type', 
        'id'=>'modal', 
        'size'=>'modal-lg', 
      ]); 

      echo "<div id='modalContent'></div>"; 

      Modal::end(); 

    ?> <!-- end modal --> 

<?= GridView::widget([ 
    'dataProvider' => $dataProvider, 
    'filterModel' => $searchModel, 
    'columns' => [ 
     ['class' => 'yii\grid\SerialColumn'], 

     'id', 
     'type', 
     'days', 
     'created_by', 
     'modified_by', 
     // 'status', 

     ['class' => 'yii\grid\ActionColumn'], 
    ], 
]); ?> 

我控制器創建動作代碼

public function actionCreate() { 
     $model = new CollectionType(); 

     $model->created_by = Yii::$app->user->identity->username; 
     if ($model->load(Yii::$app->request->post()) && $model->save()) { 
      return $this->redirect(['view', 'id' => $model->id]); 
     } else { 
      if (Yii::$app->request->isAjax) { 
       return $this->renderAjax('create', ['model' => $model]); 
      } else { 
       return $this->render('create', ['model' => $model]); 
      } 
     } 
} 

我的js代碼

$(function(){ 
$('#modalButton').click(function(){ 
    $('#modal').modal('show') 
     .find('#modalContent') 
     .load($(this).attr('value')); 
}); 

$('#modal').on('show.bs.modal', function() { 
    $('.modal-lg .modal-content').css('height',$(window).height()*0.55); 
}); 
}); 

正如我說我已經解決了問題由我們上面的JS腳本,但我不認爲這是最好的解決方案,因爲我必須手動設置每個模式的這種高度。什麼可能導致這個問題?有沒有人遇到過這個問題並解決?

回答

2

這看起來像一個浮動問題。修改模態內生成的視圖:

將此模態的內容包含在<div class="clearfix"></div>之間。

OR

這個觀點的末尾添加<div class="clearfix"></div>

+0

該解決方案解決了這個問題。 – gojiraki