Datetimepicker обрезается при отображении внутри Jconfirm - PullRequest
0 голосов
/ 04 ноября 2019

Я отобразил Jconfirm:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
$("#ajout").on("click", function() {
            $.confirm({
                boxWidth: '50%',
                useBootstrap: false,
                content: function () {
                    var self = this;
                    return $.ajax({
                        url: "/track/admin/ajoutJourFerieInnopine",
                        type: "POST"
                    }).done(function (response) {
                        self.setContent(response);
                        self.setTitle("Ajout d'un jour férié innopiné ");
                    }).fail(function () {
                        self.setContent('Something went wrong.');
                    });
                },
                buttons: {
                    formSubmit: {
                        text: 'Ok',
                        btnClass: 'btn-blue',
                        action: function () {
                            var jour = this.$content.find('.jourFerie').val(), descr = this.$content.find('.jourFerieDescr').val();
                            var promise = new Promise((resolve, reject) => {
                                $.ajax({
                                    url: "/track/admin/ajouterJourFerieInnopine",
                                    type: "POST",
                                    data: { jour: jour, descr: descr },
                                    success: function (data, status, xhr) {
                                        resolve(data);
                                    },
                                    error: function (xhr, status, error) {
                                        reject(error);
                                    }
                                });
                            });
                            promise.then(function () {
                                $("#menu_george").find("li.menu-active").first().click();
                            });
                        }
                    },
                    cancel: function () { }
                },
                onContentReady: function () {
                    // bind to events
                    var jc = this;
                    this.$content.find('form').on('submit', function (e) {
                        // if the user submits the form by pressing enter.
                        e.preventDefault();
                        jc.$$formSubmit.trigger('click'); // reference the button and click it
                    });
                }
            });
        });

Вот страница, которую я отображаю внутри модального окна:

<form action="">
    <div class="row form-group col-sm-12">
        <label class="col-sm-2">Date</label>
        <div class='input-group date col-sm-2' id='jour'>
            <input type='text' class="form-control jourFerie" id="djour" name="djour" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-time"></span>
            </span>
        </div>
    </div>
    <div class="row form-group col-sm-12">
        <label class="col-sm-2">Description</label>
        <textarea class="col-sm-8 jourFerieDescr" id="descr"></textarea>
    </div>
</form>
<script>
    $(document).ready(function() {
        $('#jour').datetimepicker({
            format: 'DD/MM/YYYY'
        });
    });
</script>

Во время выполнения сборщик обрезается:

enter image description here

Как полностью показать сборщик?

...