flexboxが高さを計算した後のリーフレットマップをレンダリングする

残りのスペースを占めるフレックスチャイルドにマップを描画しようとしています。flexboxが高さを計算した後のリーフレットマップをレンダリングする

私は主なコンテンツの上にカップルヘッダーがあり、バナーの1つが隠されたり削除されたりすることがあるので、フレックスボックスを使用して、他の要素の位置に影響を与えずにヘッダーを消すことができます。 I.Eこれは、絶対的なポジションを使用するとうまくいかない。

私の問題は、flexboxがマップdivの高さを計算する前にリーフレットがマップビューポートを計算しているようです。

例：

ここでは、マップの高さは、それがあるべきよりも小さい思考リーフレットのスクリーンショットです。

私は要素の高さを確認した場合、それは正しいです。さらに、リーフレットにタイマーを入れてマップサイズを無効にすると、マップは正しい高さでレンダリングされます。

HTML：

<body> 
    <div class="header"> 
     Header 
    </div> 

    <div class="banner"> 
     Banner 
    </div> 

    <main class="main"> 
    <div class="nav"> 
     <strong>Navigation</strong> 
    </div> 

    <div id="map" class="map-content"></div> 
    </main> 


    <script src="script.js"></script> 
    </body>

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.header { 
    height: 50px; 
    background-color: grey; 
    color: white; 
} 

.banner { 
    height: 50px; 
    background-color: lightgrey; 
    color: white; 
} 

.main { 
    display: flex; 
    flex: 1 1 auto; 
    flex-direction: row; 
} 

.map-content { 
    flex: 1 1 auto; 
} 

.nav { 
    background-color: #2A3D4A; 
    color: white; 
    width: 200px; 
}

編集：私は叫んだ、plunkで問題を再現している

！しかし、私はまだ何が起きているのか正確には分かりません。この問題は、アプリケーションにngAnimateを組み込む場合にのみ発生します。 ngAnimateを使用するかどうかは関係ありません。

ここには壊れた塊があります。最初のページの読み込み時にマップは正常です。 aboutリンクをクリックして、地図に戻ります。戻ってくると地図の約半分しか読み込まれないことに注意してください。私はコンソールに高さを記録する。あなたが地図から離れて移動し、常にその約半分の大きさに戻るとき。

分割された秒間に要素をサイズの半分にするには、角度アニメーションとは何ですか？これは角度のバグですか？

http://plnkr.co/edit/dyBH1Szo3lIEWajKqXWj?p=preview

出典

2016-04-01 lostintranslation

このプランナーに示すように、「約」をクリックすると、 '＃map'のサイズが変わります。http://plnkr.co/edit/NRTW4TL29yc36omsbJ9M?p=preview – sqsinger

正しい。良い発見。私のアプリにngAnimateを挿入しないと、aboutのページでdivが利用できなくなります。それは間違っているように見えますが、なぜ私のアプリにアンギュラアニメーションを挿入すると、そのルートが新しいルートに留まっているのですか？ – lostintranslation

編集plunkr：http://plnkr.co/edit/pIg9HKwkl0Bfhk4N3wQX?p=preview

試しに "invalide" このようなマップ：

それはリーフレットマップのように見える

app.directive('leaflet', ['$document','$timeout', function($document,$timeout) { 

    function controller() { 
    console.log('in leaflet directive controller'); 

    var element = $document.find('#map'); 
    console.log('main container height: ' + element[0].offsetHeight); 

    var map = L.map('map',{crs: L.CRS.EPSG4326}).setView([0,0], 4); 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); 

    // the timeout wait the view to render 
    $timeout(function() { 
     // this rebuild the map 
     map.invalidateSize(); 
    }, 0); 
    } 

    return { 
    template: '<div id="map" class="map-content"></div>', 
    controller: controller, 
    replace: true 
    } 

}]);

出典

2016-04-04 13:10:03 AlainIb

これはオプションですが、最高の回避策です。なぜngAnimateを組み込むとdivが消えず、別のルートに行くとサイズが変わるのですか？ – lostintranslation

私が知っていることから、マップが隠されて表示されたときにリーフレットの問題を抱えています（例えば、アコーデオンのようなCSSで）。これは私が見つけた唯一の解決策です。たぶんngAnimateは、再構築せずにdivを非表示/表示することがあります。私はあなたのポストに従ってより良い解決方法を見てみましょう;） – AlainIb

が作成した高さを取得し、あなたがする必要があります高さが変わる場合は.invalidateSize()に電話してください。リーフレットのドキュメントでは、Make sure the map container has a defined height, for example by setting it in CSS（http://leafletjs.com/examples/quick-start.html参照）と記載されています。明示的に高さを設定するのではなく、代わりにCSS規則position: absolute; top:0; bottom: 0; left: 0; right: 0;を持っているので、それはややこしいです。

ngAnimateを含めると、transitionの要素に影響があり、何とか正しい高さがチラシに表示されないという問題があると思います。あなたは回避策を使用する必要があると思います。高さの変化を検出して、あなたのディレクティブにこれを追加すること.invalidateSize()

てみ呼び出す：あなたのコントローラがリーフレットマップオブジェクトがスコープにあるので$scope.map = L.map('map',{crs: L.CRS.EPSG4326}).setView([0,0], 4);を設定してください、と.map-contentにあなたが持っているCSSルールを削除

link: function(scope, element) { 
    scope.$watch(function() { return element.parent().height(); }, function (val) { 
    console.log('height changed to: ' + val); 
    scope.map.invalidateSize(); 
    }); 
}, 
scope: true,

を

出典

2016-04-07 23:53:14 Mike

そしてここで結果plnkrを見つけることができます：http://plnkr.co/edit/5UNWYJH76Xo7zwE8UOD7?p=preview –

私は同様の問題がありました。起こっていたことは、ディレクティブがロードされているときに、ポストリンク関数がdiv要素のclientHeightを計算したことです。 divは残りのスペースをflexで埋めます。しかし、それはいつもいくらかの金額ではなかった。私はすべてのテンプレート部分がWebサーバーから取得される前にポストリンクを呼び出す角度まで追跡しました。別のディレクティブはまだurlTemplateを待っていましたが、そのディレクティブが入ると別のdivが高さを変えてしまいました。

私は十分な時間のタイムアウトを置くだけで、問題を回避しました。また、私が遅いdivからイベントをブロードキャストし、高さを計算する前にそれを待っていた場合、これも問題を回避して動作します。

すべてのテンプレートがロードされ、すべてのディレクティブがDOMを操作したときに、簡単な方法を見つけることができませんでした。指令の優先順位は、物事の順序を変えることは絶対にありませんでした。

ブラウザでイベントのシーケンスを見て、遅く到着する部分的なテンプレートではないかどうかを確認して、タイミングを捨てて、実行を依頼されたときに計算が正確に実行されないようにします。

出典

2016-04-09 03:10:42

flexboxが高さを計算した後のリーフレットマップをレンダリングする

答えて

関連する問題