3

私が保守している Vaadin アプリケーションの基本的なビジュアル構造は、主に TabSheet 実装メニューで構成される中央のワークエリアで構成されています。内側のワークエリアの幅は (少なくとも現在は) 固定されています。

私が達成しようとしていることは次のとおりです。

  1. ワークエリアはビューポートの下部まで拡大する必要がありますが、垂直方向に、たとえば 400px よりも小さくしないでください。
  2. ビューポートのサイズを変更する場合、ワークエリアは (水平位置と垂直サイズで) 適応する必要があります。
  3. ビューポートが高さまたは幅でワークエリアよりも小さくなる場合、スクロールバーはビューポートに表示されます (つまり、ワークエリアには表示されません)。
  4. iOS または Android デバイスでは、ロケーション バーが表示されなくなります。これに関するメモ: 「通常の」Web サイトとは異なり、高さを計算した Vaadin アプリケーションは積極的にサイズを縮小しているように見えるため、モバイル デバイスのブラウザーはより多くのスペースを確保するためにロケーション バーを非表示にする必要がないと認識していることに気付きました。

これが私の試みの1つです：

public class VaadinApplicationImpl1 extends Application {
  private static final long serialVersionUID = 1L;

  @Override
  public void init() {
    setTheme("sample");
    setMainWindow(new Window() {{
      setCaption("Vaadin-Layouting Sample");
      setContent(
        new CssLayout() {{
          addStyleName("workareacontainer");
          addComponent( 
            new TabSheet() {{
              addTab(
                new VerticalLayout() {{
                  setSizeFull();
                  setSpacing(true);
                  Label l = new Label("Workarea");
                  addComponent(l);
                  setExpandRatio(l, 1.0f);
                  addComponent(
                    new HorizontalLayout() {{
                      setSpacing(true);
                      addComponent(new Button("Button 1"));
                      addComponent(new Button("Button 2"));
                    }}
                  );
                }}, 
                "First"
              );
            }}
          );
        }}
      );
    }});
  }
}

どこ

.workareacontainer {
    min-height: 400px;
    height: 100%;
}

.workareacontainer > div {
    position: relative;
    height: 100%;
    width: 800px;
    min-width: 800px;
    margin: 0 auto;
    background-color: red;
}

.workareacontainer > div > div {
    position:absolute;
    top:5px;
    bottom:5px;
    left:5px;
    right:5px;
    background-color: green;
}

その結果、タブ シートが必要に応じて引き伸ばされて中央に配置されますが、ブラウザのサイズが変更されてもサイズは変更されません。それは CssLayout の制限ですか? それは克服できますか？

さらに、垂直スクロールバーのみが表示され、水平スクロールバーは表示されません。それを修正する方法はありますか？

Panel と setSizeUndefined() の内部レイアウトから開始すると、ブラウザ レベルのスクロールバーを取得できると思われます。ただし、100％ストレッチの要件がない場合にのみ機能するようです。

申し訳ありませんが、これが重複していて、他の質問から適切な解決策を特定できなかった場合.

どんな提案も素晴らしいでしょう！

4

1 に答える 1