3

私は次のような構造を持っています

<g:TabLayoutPanel ui:field="rightTabPanel" 
             width="100%" height="100%" 
                     barUnit="EM" barHeight="3"> 
    <g:tab> 
          <g:header>Graph</g:header> 
                    <g:FlowPanel ui:field="graphContent"/> 
     </g:tab> 
      <g:tab> 
           <g:header>Data</g:header> 
                      <g:FlowPanel ui:field="dataContent"/> 
     </g:tab> 
 </g:TabLayoutPanel>

2つのタブがあり、そのうちの1つはグラフを表示し、もう1つはデータを表示します。ただし、タブ内のコンテンツは表示されません。入れたら

<g:FlowPanel ui:field="graphContent"/>

TabLayoutPanelの外側ではグラフを見ることができますが、上記のように配置するとグラフは表示されません。手がかりがあれば役に立ちます。前もって感謝します。

4

2 に答える 2

9

TabLayoutPanel が正しく機能するためには、次のことを確認する必要があります。

1) 標準モードです (<!DOCTYPE html> を使用)
。2) TabLayoutPanel の親に GWT 2.0 の新しいレイアウト パネルの 1 つを使用しています。
または
TabLayoutPanel の高さを明示的に指定します (パーセンテージは機能しません。別の単位を使用する必要があります)。

TabLayoutPanel は、その *Layout コンテナーのサイズに基づいて絶対配置を使用します。通常の親要素 (「div」など) のスペースは自動入力されません。したがって、*LayoutPanels の 1 つ (DockLayoutPanel など) を親として使用するように簡単に切り替えることができれば幸いです。

*LayoutPanel を使用できない場合: TabPanel は標準モードでは機能せず (クロスブラウザーとの互換性を持たせたい場合は、これを使用する必要があります)、TabLayoutPanel は流動的なレイアウトではうまく機能しません。自分のバージョンの TabPanel を作成し、代わりにそれを使用することになりました。独自のカスタム ウィジェットを作成することに慣れていて、*LayoutPanels のいずれかを使用できない場合は、独自のウィジェットを作成するか、既存のウィジェットの 1 つを拡張することをお勧めします。

別の方法として、CSS または JavaScript を使用して、タブのコンテンツ領域を position: absolute から position: relative に変更することもできますが、これはちょっとハックのように思えて、将来壊れる可能性があります。

于 2010-09-23T15:43:50.003 に答える
5

それが役立つかどうかはわかりませんが、<g:TabPanel>の代わりに使用してみてください<g:TabLayoutPanel>。私はそれが非推奨であることを知っています。

TabLayoutPanelにも問題がありましたが、TabPanelに戻すと問題がなくなりました。TabLayoutPanelにはいくつかのサイズの問題があります。たとえば、divに配置できない、ウィンドウ全体を「所有」する必要があるため、TabPanelとはまったく異なります。

于 2010-09-23T13:59:24.927 に答える