0

CSSの「アウトライン」パラメータを追加したい。
Java コード。

package com.test.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Widget;

public class MyDialogBox extends DialogBox {

    private static final Binder binder = GWT.create(Binder.class);

    interface Binder extends UiBinder<Widget, MyDialogBox> {

    }

    public MyDialogBox() {
        setWidget(binder.createAndBindUi(this));
    }
}

XML コード。

<?xml version="1.0" encoding="UTF-8"?>
<!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>
        .panel {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            outline: 15px solid blue;
            background-color: ivory;
            /*margin: 15px;*/
        }
    </ui:style>

    <g:TabLayoutPanel barUnit='EM' barHeight='1' styleName="{style.panel}">
        <g:tab>
            <g:header size='20'>tab1</g:header>
            <g:Label>label1</g:Label>
        </g:tab>
        <g:tab>
            <g:header size='20'>tab2</g:header>
            <g:Label>label2</g:Label>
        </g:tab>
    </g:TabLayoutPanel>
</ui:UiBinder>

外枠は表示されません。
ここに画像の説明を入力
しかし、マージンパラメータのコメントアウトを外すと表示されます。
ここに画像の説明を入力
margin パラメータなしで Outline パラメータを正しく追加するにはどうすればよいですか?

4

1 に答える 1

0

borderを追加したくない場合は、プロパティを使用する必要がありますmargin。解決策は、別の div でラップすることです。

例(テストされていないため、何らかの調整が必要になる場合があります):

<ui:style>
    .panel {
        width: 400px;
        height: 200px;
        border: 1px solid red;
        /* DELETED border: 15px solid blue; */
        background-color: ivory;
        /* DELETED margin: 15px; */
    }
    .subpanel {
        border: 15px solid blue;
    }
</ui:style>

<div class="panel">
    <g:TabLayoutPanel barUnit='EM' barHeight='1' styleName="{style.subpanel}">
        <g:tab>
            <g:header size='20'>tab1</g:header>
            <g:Label>label1</g:Label>
        </g:tab>
        <g:tab>
            <g:header size='20'>tab2</g:header>
            <g:Label>label2</g:Label>
        </g:tab>
    </g:TabLayoutPanel>
</div>

プロパティの詳細については、w3schoolのドキュメントを参照することをお勧めしますoutline

これはあなたを助けるでしょう。

于 2013-08-02T08:46:53.003 に答える