0

以下のコードは、ブラウザの左上隅にログイン ボックスを表示しますが、中央に表示したいと考えています。

CSS スタイル要素とセル要素を使用してセンタリングする方法に関するさまざまなトピックを読みましたが、機能していません。たぶん私は何か間違ったことをしています。

私はUiBinderを学び始めたばかりなので、スタイルが悪いことをお許しください。

どんな助けでも大歓迎です、ありがとう。

コードは次のとおりです。

<ui:style>
        buttonsDiv{
        float: right;
        margin-top: 20px;
    }
</ui:style>
<g:DialogBox text="Instructor Registration">
    <g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>First Name</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Last Name</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Institution</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>
        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Label>Department</g:Label>
            <g:TextBox></g:TextBox>
        </g:HTMLPanel>

        <g:HTMLPanel styleName='buttonsDiv'>
            <g:Button ui:field="submit">Submit</g:Button>
            <g:Button ui:field="goBack">Cancel</g:Button>
        </g:HTMLPanel>

    </g:HTMLPanel>
 </g:DialogBox>
4

1 に答える 1

0

編集: Marconius CSS を追加

次のコードを使用すると、ダイアログ ボックスの左上隅を中央に配置できます (UI バインダーの CSS 文法で行ったいくつかの修正に注意してください)。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style>
        .buttonsDiv {
            margin-top: 20px;
        }

        .centerCss {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 300px;
            margin-top: -150px;
            margin-left: -75px;
       }
    </ui:style>
    <g:VerticalPanel stylePrimaryName="{style.centerCss}">
        <g:DialogBox text="Instructor Registration">
            <g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>First Name</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Last Name</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Institution</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>
                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Label>Department</g:Label>
                    <g:TextBox></g:TextBox>
                </g:HTMLPanel>

                <g:HTMLPanel styleName="{style.buttonsDiv}">
                    <g:Button ui:field="submit">Submit</g:Button>
                    <g:Button ui:field="goBack">Cancel</g:Button>
                </g:HTMLPanel>
            </g:HTMLPanel>
        </g:DialogBox>
    </g:VerticalPanel>
</ui:UiBinder>

実際にダイアログ ボックス自体を中央に配置したい場合は、さらに考慮すべき点がいくつかありますが、それほど簡単ではありません。クラスcenter()内のメソッドの実装を確認したい場合があります。PopupPanel

于 2013-08-11T14:25:07.390 に答える