Gridstack.js: 親の高さ全体を取得するためのネストされたグリッドのサポート(列のように%行をシミュレート)

作成日 2017年09月19日  ·  6コメント  ·  ソース: gridstack/gridstack.js

ネストされたグリッドを使用して複合ウィジェットを作成しています。これは、他のグリッド内で不透明なウィジェットとして使用できるウィジェットのタイトなグループです(ユニットとして移動され、個別に編集されます)。 最悪の場合、親のgridItemによって指定されたスペース全体(幅と高さ)を取得するためにネストされたグリッドが必要です。これには、ユーザーがサイズ変更可能なヒューリスティックが含まれます。

理想的には、 grid.cellHeight = 'dynamic'は親の高さ全体を意味し、列が幅全体(%ベースのサイズ)をとる今日のようになります。 新しいアイテムを追加すると、物をドラッグ/配置するときに一時的に新しい行が作成されます(コンテンツが収まらないためスクロールVバーが作成されます)が、離すと収まるようにサイズが変更されます(cellHeightを収まるように縮小し、同じ行#と全体を維持します)レイアウト)

今のところ、私は側でハックしようとしています....まだ最も単純な部分は機能していません!

あなたの環境

v 0.3.0および最新の1.0.0-devは、わずかに異なる動作を示しています(

再現する手順

1) https://jsfiddle.net/cLdzzL8p/2/
アイテムのサイズ変更を処理するための追加コードを含むdemo / nested.htmlのコピーです
$( '#grid')。on( 'gsresizestop')
2)右側のグリッドアイテムのサイズを変更する(ネストされている)ふりをするか、イベントをトリガーするために幅を広くします
3)oldCellHeight = 60pxはより大きな数値になります(同じ300pix gridItemの場合は140px)

期待される動作

親の高さ全体を取得するためのネストされたグリッド(動的に変化)

実際の動作

v0.3.0(グリッドサンプル)では、グリッドは成長して全体の高さを取り、セルも同様に高くなりますが、すべての兄弟のgridItemsも成長します(これは、誤った共有リソースであるか、$()検索ではありません)ネストされたグリッドの子にフィルターされます。

1.0.0-dev(私が使用しているもの)では、GridStack.prototype._updateStyles()が、より早く移動されたこのコード行のために早期に戻るように見えることに注意してください

if(this._styles._max!== 0 && maxHeight <= this._styles._max){return; } //this._styles._maxを増やし続ける

https://github.com/gridstack/gridstack.js/commit/a38d78eebe59686a6ffea1b802791ac39e15de2dを参照してください。これはわかりません。 #766も

最も参考になるコメント

#717#728#118#404およびおそらく他の多くのものと同じ/関連...グリッドが親の高さの100%を取ることをサポートする方法としてcellHeight = "dynamic"を使用するのが理想的です(親でサイズ変更イベントをトリガーしない場合があります些細でコンテナ固有である必要があります。私の場合は別のgriditem / divですが、外側のwindow / divの場合もありますが、許可されたスペースでアイテムの追加/削除およびドラッグを許可します。

全てのコメント6件

#717#728#118#404およびおそらく他の多くのものと同じ/関連...グリッドが親の高さの100%を取ることをサポートする方法としてcellHeight = "dynamic"を使用するのが理想的です(親でサイズ変更イベントをトリガーしない場合があります些細でコンテナ固有である必要があります。私の場合は別のgriditem / divですが、外側のwindow / divの場合もありますが、許可されたスペースでアイテムの追加/削除およびドラッグを許可します。

@argumentまたは、高さをX行数に設定すると、gridstackはそれ自体または親の高さを使用してX行に分割できます。 そうすれば、現在の幅と同じように機能します。

次に、各行の間隔が必要な場合にのみ、verticalMarginを指定します。 高さを自動拡張する動作の場合、代わりに高さを「自動」に設定できますか?

または、高さをX行の量に設定してから、gridstackがそれ自体または親の高さを使用してX行に分割することもできます。

@krilllind列(12)と行の数を修正した場合、それらのサイズを縮小せずにコンテンツを実際に追加/削除することはできず、絶対最大値があります。 今日のheightは、実際にはmaxHeight (または `maxRow ')である必要があります。これは、使用できる行の最大数を指定するため、提案どおりに機能します。

これと他のリクエストは、親から提供された利用可能な高さをグリッドで埋めるようにすることですが、それでもアイテムを操作/追加/削除できます。

この問題について何か進展はありましたか? 私はこの問題と他のいくつかの問題を抱えています。 これが私が作った新しい問題です。 ## 814

これを新しいバージョンですぐにリリースする予定はありますか?
私は自分のニーズに合わせて特別なパッチを作成しましたが、それは満足のいくものではなく、私のバージョンには他のバグが含まれています。
私はこれに対する永続的な解決策を本当に探しています。

@Altraya私は修正を見ていませんが、誰かにこれのコードレビューを提出してもらいたいです!

このページは役に立ちましたか?
0 / 5 - 0 評価