модальное содержимое начальной загрузки расширяется за модальное

Question

Я пытаюсь сделать это:

... больше похоже на это:

Страница, над которой я работаю:

http://www.frostjedi.com/terra/scripts/demo/bootstrap-content-extends-past-modal.html

Мой код:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">




<div class="modal fade modal-aside horizontal right events-modal ui-draggable in" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false" style="display: block; padding-right: 0px;">
    <div class="modal-dialog modal-dialog modal-md">
        <div class="modal-content">
            <form class="form-full-event" action="http://local.pap360.com/run.php/reports/admin/timeclock" method="post">
                <div class="modal-body">

                    <div class="col-md-12">
                            <fieldset>
                                <input type="hidden" id="logID" name="logID" value="&lt;?= $row-&gt;logID ?&gt;">
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label>Type</label>
                                        <select id="logType" name="logType" class="form-control">
                                            <option value="">Select Type</option>
                                            <option value="Daily">Daily</option>
                                            <option value="Lunch">Lunch</option>
                                            <option value="Break">Break</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>Time In</label>
                                        <input type="text" id="timeIN" name="timeIN" value="" class="form-control dateTime">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>Time Out</label>
                                        <input type="text" id="timeOUT" name="timeOUT" value="" class="form-control dateTime">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="reset" id="reset" class="btn btn-sm btn-warning">Cancel</button>
                                        <button type="submit" id="addEntry" class="btn btn-sm btn-success" disabled="">Add Entry</button>
                                        <button type="submit" id="submitChanges" class="btn btn-sm btn-primary">Update</button>
                                        <!--
                                        <button type="submit" id="updateEntry" class="btn btn-sm btn-primary">Update</button>
                                        -->
                                        <span id="errorMsg" style="color:red">&nbsp;</span>
                                    </div>
                                </div>
                            </fieldset>
                        <!--
                            <button type="submit" id="submitChanges" class="btn btn-primary">Submit Changes</button>
                            -->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Если я это сделаю $('.modal-content').css('height', '150px'); Я получаю что-то, похожее на второе изображение, но я просто предполагаю, что не нужно жестко задавать высоту, и мне нужно внести в нее изменения, если я хочу добавить пояснительный текст и т. Д.

Если я это сделаю $('fieldset').parent().css('float', 'none'); это как бы решает проблему, но тогда каждый элемент формы находится в отдельной строке.

Если мне не нужно иметь адаптивный макет, и мне не нужно использовать способ Bootstrap, я мог бы поставитьразличные элементы формы в таблицу.

Есть идеи?

Answer 1

Ваша проблема в первом дочернем элементе модального тела, у которого есть класс col-md-12, у которого есть стиль float="left".Удалите class="col-md-12" или добавьте style="float:none" (или другой стиль с плавающей точкой с аналогичным эффектом).

Answer 2

Просто добавьте этот класс в модальное тело

class="modal-body clearfix"

Замените это

class="modal-body"

введите описание изображения здесь

Надеюсь, что это работает.

Answer 3

Вы можете просто добавить класс clearfix к родительскому элементу, который содержит свойство box shadow

Answer 4

Вы можете добавить дополнительный класс к вашему col-md-12, который окружает ваш fieldset, а затем применить к нему float: unset.Таким образом, ваши элементы остаются встроенными, но высота вашего модала будет иметь что-то, с чем можно рассчитать.

Answer 5

Вы можете использовать панель примерно так

 <div class="content">
                            <div class="form-horizontal" action="#">
                                <div class="panel panel-flat">
                                    <div class="panel-body">

и вставить все свои элементы управления внутрь