1

navigator7 アドオンと組み合わせて vaadin を使用しています。ヘッダーとフッターには、コンポーネント間にスペースがあります。ヘッダーとフッターのコンポーネントに setSpacing(false) を使用して間隔を削除しようとしましたが、おそらくアドオンが原因で機能していません。cssを使って解決してみました。以下のサンプルは、vaadin が生成するテスト出力 html です。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div div .footer-label, .footer-label{
color: green;
width: 100px !important;
}
</style>
</head>

<body>
<div class="my-footer">
<div>
<div style="color: red; height: 20px; width: 482px; overflow: hidden; float: left;    padding-left: 0px; padding-top: 0px; background-color:yellow;">
<div style="float: left; margin-left: 0px;">
<button class="footer-label" style="width: 400px;">Text</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

div div内にボタンがあります。ルート div の幅をボタンとまったく同じ幅にしたいと思います。

このcssコードで終了しましたが、機能しません。ルート div は 482 ピクセル幅のままです。

div div .footer-label, .footer-label{
color: green;
width: 100px !important;
}

ヴァーディンコード



 public class MyAppLevelWindow extends HeaderFooterFixedAppLevelWindow {    

    @Override
    protected Component createHeader() {
        ...
    }

    @Override
    protected Component createFooter() {
        HorizontalLayout myFooter = new HorizontalLayout();
        akmedFooter.setSpacing(false);
        akmedFooter.setStyleName("my-footer");

        NativeButton sendProblemButton = new NativeButton("Button");
        sendProblemButton.setStyleName("footer-label");
        myFooter.addComponent(sendProblemButton);
        .....

        return myFooter;
    }

    .............
    }

css を使用してこの問題を解決するための回避策を教えてください。

4

3 に答える 3

1

ここでの問題は、FixedApplLevelWindow が createHeader() および createFooter() メソッドから返されるヘッダーとフッターの固定幅を設定することです。FixedApplLevelWindow の pageWidth を参照してください。これは、createFooter() メソッドから返された Horizo​​ntalLayout がこの幅を取得することを意味します。この場合、Horizo​​ntalLayout は機能し、レイアウトの子コンポーネントの幅を分割して、すべてのコンポーネントが同じサイズになるようにします。したがって、実際にはフッター内のコンポーネント間に間隔はありません。コンポーネントのスロットは、コンポーネントの幅よりも大きいだけです。フッター レイアウト内のコンポーネントに対して setWidth("100%") と言うと、「間隔」がなくなります。コンポーネントは、スロットで利用可能なすべてのスペースを使用するようになりました。

この問題を解決する 1 つの方法は、コンポーネントを別の Horizo​​ntalLayout 内にラップすることです。Horizo​​ntalLayout の幅は、デフォルトでは未定義 (setWidth(null)) です。これは、レイアウトがその子から幅を計算することを意味します。

protected Component createFooter() {
    HorizontalLayout myFooter = new HorizontalLayout();
    myFooter.setStyleName("my-footer");

    HorizontalLayout layout = new HorizontalLayout();

    NativeButton sendProblemButton = new NativeButton("Button 1");
    sendProblemButton.setStyleName("footer-label");
    layout.addComponent(sendProblemButton);

    NativeButton sendProblemButton2 = new NativeButton("Button 2");
    sendProblemButton2.setStyleName("footer-label");
    layout.addComponent(sendProblemButton2);

    myFooter.addComponent(layout);

    return myFooter;
}

詳細については、Book of Vaadin の6.12 Layout Formattingを参照してください。

于 2012-08-29T22:26:08.597 に答える
0

これを試して

div div .footer-label{
color: green;
width: 100px!important;
}
于 2012-08-28T11:37:20.193 に答える
0

幅は、JavaScript またはサーバー側で直接インラインで設定されているようです。たとえば、jQuery JavaScript を呼び出すなどして、最初にこの動作を防止する必要があります。

$('body > div').css({width: ""});

次に、このcssが機能するはずです

body > div{
    width: 100px !important;
}
于 2012-08-28T11:39:57.623 に答える