Yii2 modal height issue - yii2

Question

I've been using bootstrap modal on some form. I have learned from this tutorial to create modal. For my previous project I didn't have any issue with the modal. But for my current project the modal body is not fully covering the modal content. Here's the screenshot
I solved this problem for now by referring this. I'm not able to figure out what could be causing the height issue.
My view file code
<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'],
],
]); ?>
My controller create action code
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]);
}
}
}
And my js code
$(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);
});
});
As I said I've solved the problem by using the above js script but I don't think this is the best solution as I would have to set the height manually like this for every modal. What could be causing this problem? Has anyone faced this issue and solve?

Answer 1

This looks like a problem with floats. Modify the view generated inside the modal:
Wrap the content of this modal between <div class="clearfix"> and </div>.
OR
Add <div class="clearfix"></div> at the end of this view.