問題タブ [jquery-ui-layout]

ほとんどのプロジェクトでJQuery UI Layout Pluginを使用しています。Bootstrap をフレームワークとして使用する新しいプロジェクトを開始しました。Bootstrap コンテナーを使用して単純なレイアウトの例を試みましたが、レイアウトはレンダリングされず、実際には html はレンダリングされません。Bootstrap と JQuery UI Layout がうまく機能していないような気がします。さて、コードについて：

これは、HTML に対して実行しようとしていることです。

これは私たちが Javascript のためにやろうとしていることです:

ただし、HTML はまったくレンダリングされません (「West」または「Center」のテキストは表示されません)。しかし、body-content div を使用しないように HTML を変更し、'body' を使用してレイアウトを作成すれば問題ありません。

作業中の HTML:

ワーキングJS：

これは動作していないJSFiddleであり、動作しているJSFiddleです。

次のような構造のレイアウトを作成しようとしています。

• 北ペイン
• 中央のペイン
  • ヘッダー div
  • ノートブックのようなタブ パネル
    • 少なくとも 1 つのタブで
  • フッター div

ヘッダー div とフッター div は常に表示されている必要があります。タブは残りのスペースをすべて使用し、必要に応じて垂直スクロール バーを表示する必要があります。

これが私がしたことです：https://jsfiddle.net/mguijarr/y57v3nkf/

overflow:hidden中央のペインに 設定しheight: 100%、可能な限り大きくなるようにタブパネルに設定しようとしましたが、下のスペースを食べています（つまり、フッターのdivは表示されません）。

レイアウトを修正するにはどうすればよいですか?

triand-jqGrid 4.6.0 から free-jqGrid 4.8.0 に移行したときに、形成が壊れました

これは、jqGrid が div 内にあるためですposition: absolute; z-index: 0;。編集モーダルが jqGrid の gbox div 内にレンダリングされ、オーバーレイが本体に追加されると、z-index ルールによってダイアログがオーバーレイの下に配置されます。このバグは、jqGrid.src.js からこの変更を元に戻すことで簡単に修正できました (つまり、編集ボタンをクリックすると、編集フォームがグリッド内に表示されますが、html では本文に追加されます)。

ただし、gitHub (今後の jqGrid 4.9.0) で最新のコードを試したところ、形成ダイアログのレンダリングが変更されたようです。jqGrid.src.js を変更すると (toTop を true に設定)、フォーム編集ダイアログがブラウザーの左上隅にレンダリングされるためです。

ここにJSFiddleリンクがあります

jQuery UI Layoutによって追加されるため、これposition: absolute;は制約です

jqGrid 4.9.0 を jQuery ui Layout と再度互換性を持たせるために含めることができる特定の設定はありますか?

アップデート：

期待される出力

ウェブサイトで jquery-ui-layout プラグインを使用しています: jQuery UI Layout Hompage

トグラー内に html を配置できるオプションがありますtogglerContent_open。togglerContent_closedEAST ペインにテキストを含めたいのですが、問題は、テキストが垂直トグルを横切って水平に表示されるため、最初の文字しか見えないことです。

代わりに縦に読むように表示するにはどうすればよいですか? 以下のオプションのいずれか（悲しい、非常に大まかなモックアップ）のように。jQuery UI Layout のオプションですか、それとも css だけですか?

編集: jQuery UI レイアウト設定を変更することでこれが可能かどうかは誰にもわかりませんか?

グリッドの幅または高さを指定せず、「ui-grid-auto-resize」を使用しました。動作していますが、正しくありません。グリッドの小さな部分があるだけなので、その特定の領域のスクロールバーが表示されます (ui-layout スプリッターによって定義されます)。そのスクロールバーから逃れるにはどうすればよいですか?

また、グリッドの高さと幅に特定の数値を定義したくありません。

そして、ここに私のhtmlがあります：

そして私のグリッド定義：

HTML の何が問題なのかわからないためjquery-ui-layout、ブラウザー (Chrome/Firefox) でズームアウトするときに、ライブラリーはコンテナーの幅/高さを再計算したくありません。私の HTML では、すべての白いペインが互いに接続されていますが、ズームアウトすると切断されます...

私は公式jquery-ui-layoutのデモ、例えばこれを 見ました: http://layout.jquery-dev.com/demos/example.html styleしかし、私のコードでは - それは起こりません - 値は同じままです...

ブラウザで数回ズームアウトすると、コードでセクションがどのように見えるかを次に示します。

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

(問題を確認するには、plunker で別のウィンドウでプレビューを起動し、ブラウザでズームアウトを数回選択してください)

jquery ui レイアウトで datetimepicker を正しく動作させるにはどうすればよいですか。南ペインの後ろにあるテキストフィールドをクリックすると、datetimepicker が表示されません。

フィドルを見る

前もって感謝します。