jQuery UIダイアログでangle-ui-bootstrap datepickerが表示されない

UI BootstrapのdatepickerがjQueryUIダイアログ内にあるときに予期しない動作が発生します。カレンダーボタンをクリックすると、ダイアログ内に日付ピッカーが表示されますが、ダイアログのサイズは変更されないため、日付ピッカーはほとんどその中に隠されています。jQuery UIダイアログでangle-ui-bootstrap datepickerが表示されない

This Plunker shows the issue.

それは、ダイアログ上の日付ピッカーを引っ張ることは可能ですか？

<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.min.js"></script> 
    <script> 
    $(function() { 
     $("#dialog").dialog({ 
     resizable: false 
     }); 
     }); 

     angular.module('app', ['ui.bootstrap']) 
     .controller('ctrl', function(){}) 
    </script> 
    <style> 
     .glyphicon { font-size: 20px !important; } 
    </style> 
</head>  
<body ng-app="app" ng-controller="ctrl"> 
    <div id="dialog" title="Basic dialog"> 
     <div class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup 
           ng-model="date" is-open="open"> 
      <span class="input-group-btn"> 
       <button class="btn btn-default" ng-click="open = true"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </button> 
      </span> 
     </div> 
    </div> 
</body>

誰かがそれを修正する方法を知っていますか？

出典

2016-05-19 Miziak

なぜブートストラップとjQuery UIが混在していますか？なぜjQueryのUIダイアログの代わりにブートストラップモデルを使用しないのですか？ –

@TJ - 私はなぜ彼が2つを混ぜるのだろうと思ったが、これは依然としてブートストラップ方式の問題であろう。いずれにしても、モーダルは、開いた状態で日付ピッカーを処理するためにサイズ変更またはサイズ変更する必要があります。 – jbrown

私のプロジェクトでは、デスクトップをシミュレートして、jQueryのダイアログがうまくいくようにする必要があります。 – Miziak

私は角度でウォッチャーを使用することの大きなファンではありませんが、これは1つの用途にとっては良いようです。 $ scope変数 'open'にウォッチを入れて、それに応じてダイアログのサイズを変更することができます。コントローラは次のようになります。

.controller('ctrl', function($scope) { 
    var originalHeight = 100; 
    var originalWidth = 250; 

    $scope.$watch('open', function() { 
     var newHeight = originalHeight; 
     var newWidth = originalWidth; 

     if ($scope.open) { 
     newHeight = newHeight * 4; 
     newWidth = newWidth * 1.5; 
     } 

     $("#dialog").dialog({ 
     height: newHeight, 
     width: newWidth 
     }); 
    }); 
    });

あなたは#dialog要素からではなく、私は単にそれをハードコーディングこの例ではoriginalWidthとoriginalHeightを取得したいことがあります。

出典

2016-05-19 17:41:23 jbrown

あなたの解決策は動作しますが、サイズを変更するのではなく、ダイアログ上のフローを選択することは可能ですか？ – Miziak

@PawełMizio - 私はダイアログのサイズを変更する以外の方法は知らない。 – jbrown

jQuery UIダイアログでangle-ui-bootstrap datepickerが表示されない

答えて

関連する問題