Sweet AlertでブートストラップDatetimePickerを使用する2 - アラートでカレンダーを表示する

Question

SweetAlert2ダイアログをフォーム内で使用しています。 Bootstrap DateTimePickerウィジェットを使用したいと思います。

カレンダーウィジェットのポップアップは、SweetAlertウィンドウの上部ではなく、SweetAlertウィンドウ内に表示されます。これによりアラートが拡大/縮小されます。アラートの中をスクロールしてカレンダーを表示する必要があります。必要な動作は、カレンダーがプライマリページの子として表示され、アラートの上に表示されることです。

https://jsfiddle.net/ghr2bwoc/13/

swal({ 
    title: 'Date picker', 
    html: '<input id="datepicker">', 
    showConfirmButton: false, 
    onOpen: function() { 
     $('#datepicker').datetimepicker({}); 
    }, 

    }).then(function(result) { 

    }); 

Answer 1

あなたのスタイルシートに追加するクラスを作成します。

.swal2-overflow { 
    overflow-x: visible; 
    overflow-y: visible; 
} 

はcustomClass属性を使用して、あなたの甘い警告コードにこの新しいクラスを追加します。

swal({ 
    title: 'Date picker', 
    html: '<input id="datepicker">', 
    showConfirmButton: false, 
    customClass: 'swal2-overflow', 
    onOpen: function() { 
     $('#datepicker').datetimepicker({}); 
    }, 

}).then(function(result) { 

}); 

Answer 2

あなたは私のようなものと日時ピッカーが表示されたときsweetalertの高さが自動的にサイズを変更したくない場合。 @ taekwondoalexの答えに最大の高さと最大幅（max-height: 550px !important;min-height:550px !important;）を追加してください。

だから、まだカスタムクラスをsweetalertに追加してください。

swal({ 
    title: 'Date picker', 
    html: '<input id="datepicker">', 
    showConfirmButton: false, 
    customClass: 'custom-swal-class', 
    onOpen: function() { 
     $('#datepicker').datetimepicker({}); 
    }, 

}).then(function(result) { 

}); 

次に、あなたのCSSに追加して、例えば550px

.custom-swal-class { 
    overflow-x: visible; 
    overflow-y: visible; 
    max-height: 550px !important; 
    min-height: 550px !important; 
} 

をしたい高さに合わせて、ピクセルの高さを変更