Bootstrap 3 - Modal background doesn't change based on the height of the modal dialog?
I am putting a form inside modal code and I am trying to show some hidden form fields when users trigger a radio button. After I show the hidden fields, the height of the modal is auto-scaling, but the height of the modal background does not work as a modal dialog. How can I fix this?
<!-- modal -->
<div class='modal fade' id='contact-modal' tabindex='-1' role='dialog' aria-labelledby='modal-label' aria-hidden='true' data-backdrop='static' data-keyboard='false'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>
<span aria-hidden='true'>×</span><span class='sr-only'>Close</span>
</button>
<h4 class='modal-title' id='modal-label'>今日聯絡事項</h4>
</div>
<div class='modal-body'>
<form role='form'>
<div class='form-group'>
<label for='learning'>學習情況</label>
<div class='btn-group' id='learning' data-toggle='buttons'>
<label class='btn btn-default'><input type='radio' />良好</label>
<label class='btn btn-default'><input type='radio' />尚可</label>
<label class='btn btn-default'><input type='radio' />不佳</label>
</div>
</div>
<div class='form-group'>
<label for='lunch'>用餐情形</label>
<div class='btn-group' id='lunch' data-toggle='buttons'>
<label class='btn btn-default'><input type='radio' />食慾佳</label>
<label class='btn btn-default'><input type='radio' />食量正常</label>
<label class='btn btn-default'><input type='radio' />食慾不佳</label>
</div>
</div>
<div class='form-group'>
<label for='sleep'>午睡情況</label>
<div class='btn-group' id='sleep' data-toggle='buttons'>
<label class='btn btn-default'><input type='radio' />良好</label>
<label class='btn btn-default'><input type='radio' />晚睡</label>
<label class='btn btn-default'><input type='radio' />不睡</label>
</div>
</div>
<div class='form-group'>
<label for='eat-medicine'>餵藥紀錄</label>
<div class='btn-group' id='eat-medicine' data-toggle='buttons'>
<label class='btn btn-default active'><input type='radio' value='0' />無</label>
<label class='btn btn-default'><input type='radio' value='1' />有</label>
</div>
<div class='hide' id='take-time'>
<input type='text' class='form-control' placeholder='第一次餵藥時間' />
<input type='text' class='form-control' placeholder='第二次餵藥時間' />
<input type='text' class='form-control' placeholder='第三次餵藥時間' />
</div>
</div>
<div class='form-group'>
<label for='health'>身體狀況</label>
<div class='btn-group' id='health' data-toggle='buttons'>
<label class='btn btn-default active'><input type='radio' value='0' />正常</label>
<label class='btn btn-default'><input type='radio' value='1' />異常</label>
</div><br />
<div class='btn-group hide' id='symptom' data-toggle='buttons'>
<label class='btn btn-default'><input type='radio' value='cough' />咳嗽</label>
<label class='btn btn-default'><input type='radio' value='runny-nose' />流鼻涕</label>
<label class='btn btn-default'><input type='radio' value='sneeze' />打噴嚏</label>
<label class='btn btn-default'><input type='radio' value='fever' />發燒</label>
<label class='btn btn-default'><input type='radio' value='other' />其他</label>
</div>
<div class='hide' id='cause'>
<input type='text' class='form-control' placeholder='原因' />
</div>
</div><br />
<div class="form-group">
<label for='teacher-say'>老師說</label>
<textarea class="form-control" rows="7" id="teacher-say" placeholder="訊息內容..."></textarea>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>
<button type='button' class='btn btn-primary' data-dismiss='modal'>確定</button>
</div>
</div>
</div>
</div>
source to share
I had a similar situation when using Bootstrap tabs inside a modal ... the heights of the tab bar were different. This will cause the .modal-backdrop not to adapt to the height of the newly loaded tab. I fixed it like this ...
$('a.class').on("click", function(e){
e.preventDefault();
setTimeout( function () {
$('.modal').data('bs.modal').handleUpdate();
} , 80 );
});
I used setTimeout
because I had to wait for the content of the tab to load before resizing .modal-back-drop
. The tabs I used were not bootstrap tabs, so I couldn't use the event type shown.bs.tab
.
You can easily adapt this for ...
$('input[type="radio"]').change( function(e) {
e.preventDefault();
setTimeout( function () {
$('.modal').data('bs.modal').handleUpdate();
} , 80 );
});
This should be enough to see you :-)
source to share
Dirty hack:
setInterval(function(){
if(!$("body").hasClass("modal-open")) return;
var modalDialog = $(".modal.in > .modal-dialog");
var backdrop = $(".modal.in > .modal-backdrop");
var backdropHeight = backdrop.height();
var modalDialogHeight = modalDialog.height();
if(modalDialogHeight > backdropHeight) backdrop.height(modalDialogHeight+100);
}, 500)
source to share
Use <div class="clearfix"></div>
just above the shape.
IN,
<!-- modal -->
<div class='modal fade' id='contact-modal' tabindex='-1' role='dialog' aria-labelledby='modal-label' aria-hidden='true' data-backdrop='static' data-keyboard='false'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>
<span aria-hidden='true'>×</span><span class='sr-only'>Close</span>
</button>
<h4 class='modal-title' id='modal-label'>今日聯絡事項</h4>
</div>
<div class='modal-body'>
<form role='form'>
<div class='form-group'>
<label for='learning'>學習情況</label>
<div class='btn-group' id='learning' data-toggle='buttons'>
<label class='btn btn-default'><input type='radio' />良好</label>
<label class='btn btn-default'><input type='radio' />尚可</label>
<label class='btn btn-default'><input type='radio' />不佳</label>
</div>
</div>
<div class='form-group'>
<label for='lunch'>用餐情形</label>
<div class='btn-group' id='lunch' data-toggle='buttons'>
<label class='btn btn-default'><input type='radio' />食慾佳</label>
<label class='btn btn-default'><input type='radio' />食量正常</label>
<label class='btn btn-default'><input type='radio' />食慾不佳</label>
</div>
</div>
<div class='form-group'>
<label for='sleep'>午睡情況</label>
<div class='btn-group' id='sleep' data-toggle='buttons'>
<label class='btn btn-default'><input type='radio' />良好</label>
<label class='btn btn-default'><input type='radio' />晚睡</label>
<label class='btn btn-default'><input type='radio' />不睡</label>
</div>
</div>
<div class='form-group'>
<label for='eat-medicine'>餵藥紀錄</label>
<div class='btn-group' id='eat-medicine' data-toggle='buttons'>
<label class='btn btn-default active'><input type='radio' value='0' />無</label>
<label class='btn btn-default'><input type='radio' value='1' />有</label>
</div>
<div class='hide' id='take-time'>
<input type='text' class='form-control' placeholder='第一次餵藥時間' />
<input type='text' class='form-control' placeholder='第二次餵藥時間' />
<input type='text' class='form-control' placeholder='第三次餵藥時間' />
</div>
</div>
<div class='form-group'>
<label for='health'>身體狀況</label>
<div class='btn-group' id='health' data-toggle='buttons'>
<label class='btn btn-default active'><input type='radio' value='0' />正常</label>
<label class='btn btn-default'><input type='radio' value='1' />異常</label>
</div><br />
<div class='btn-group hide' id='symptom' data-toggle='buttons'>
<label class='btn btn-default'><input type='radio' value='cough' />咳嗽</label>
<label class='btn btn-default'><input type='radio' value='runny-nose' />流鼻涕</label>
<label class='btn btn-default'><input type='radio' value='sneeze' />打噴嚏</label>
<label class='btn btn-default'><input type='radio' value='fever' />發燒</label>
<label class='btn btn-default'><input type='radio' value='other' />其他</label>
</div>
<div class='hide' id='cause'>
<input type='text' class='form-control' placeholder='原因' />
</div>
</div><br />
<div class="form-group">
<label for='teacher-say'>老師說</label>
<textarea class="form-control" rows="7" id="teacher-say" placeholder="訊息內容..."></textarea>
</div>
<div class="clearfix"></div>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>取消</button>
<button type='button' class='btn btn-primary' data-dismiss='modal'>確定</button>
</div>
</div>
</div>
</div>
source to share