0

RPC 操作の実行中に CSS アニメーションの読み込みを表示するために、GWT でポップアップ パネルを作成しています。これを行うために、uiBinder 要素を使用してポップアップ パネルを作成しました。したがって、すべて正常に動作していますが、ポップアップ パネルを「囲む」白いフレームを取り除く方法がわかりません。これをお見せしましょう：

ここに画像の説明を入力

私がこれを達成したいこと:

ここに画像の説明を入力

わかりました、ポップアップ パネルのコードをお見せしましょう...

public class LoadingDialogMessage extends PopupPanel {

private static LoadingDialogMessageUiBinder uiBinder = GWT.create(LoadingDialogMessageUiBinder.class);

interface LoadingDialogMessageUiBinder extends UiBinder<Widget, LoadingDialogMessage> {}

public LoadingDialogMessage() {
    setWidget(uiBinder.createAndBindUi(this));
    setAutoHideEnabled(true);
    setGlassEnabled(true);
    center();
}
}

私の ui.xml ファイルのコードは次のとおりです。

<!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'>
 <g:HTMLPanel styleName="loading_container">
    <label class="loading_label">Loading info from itsaseus buoys</label>
    <div class="bubblingG">
        <span id="bubblingG_1">
        </span>
        <span id="bubblingG_2">
        </span>
        <span id="bubblingG_3">
        </span>
    </div>
</g:HTMLPanel> 
</ui:UiBinder>

関連する CSS:

.loading_label{
color:#ffffff; 
font-size: 85%; 
text-align: center; 
text-decoration: none; 
/*  font-stretch: condensed;  */
font-weight: bold; 
font-family: Helvetica, Arial, sans-serif;
}
.loading_container{
height: 100%;
background: #3a9bff;
    padding: 0.5em; 
text-align: center;
border:3px solid;
border-color: #4452ED;
/* border-radius */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;    
}

CSS の残りの部分は、このページからのローディング アニメーション用に自動的に生成されます。それらのスタイルを使用するdivを削除しても問題はまだあるので、彼らはそれとは何の関係もないと思います..

この白いフレームを取り除く方法を知っている人はいますか? 私はCSSがまったく得意ではありません。これはとても奇妙です...たくさんの調整を試みましたが、どれもうまくいきませんでした...

ありがとう！アレックス

編集: 示唆されているように、メインの css ファイルに新しいクラスを作成しました。

.loading_panel{
border: none;
background: transparent;
}

ui.xml を変更しました。

     <g:HTMLPanel>
        <div class="loading_container">
        <label class="loading_label">Loading info from itsaseus buoys</label>
        <div class="bubblingG">
            <span id="bubblingG_1">
            </span>
            <span id="bubblingG_2">
            </span>
            <span id="bubblingG_3">
            </span>
        </div>
        </div>
</g:HTMLPanel>

そして、ポップアップを作成するときにスタイルを関連付けています:

        m = new LoadingDialogMessage();
    m.addStyleName("loading_panel");
    m.show();

これが生成された HTML コードです。

<div class="gwt-PopupPanel loading_panel" style="left: 649px; top: 444px; visibility: visible; position: absolute; overflow: visible;">
        <div class="popupContent"><div>
            <div class="loading_container"> 
                <label class="loading_label">Loading info from itsaseus buoys</label> 
                    <div class="bubblingG"> 
                        <span id="bubblingG_1"> </span> 
                        <span id="bubblingG_2"> </span> 
                        <span id="bubblingG_3"> </span> 
                    </div> 
                </div>
            </div>
        </div>
    </div>

loading_panel スタイルが追加されている間、GWT は gwt-PopupPanel スタイルとこれも追加しています:

style="left: 649px; top: 444px; visibility: visible; position: absolute; overflow: visible;"

addStyleName がまったくオーバーライドされていないように見えます...

4

2 に答える 2

1

ボーダーレス ポップアップに適した CSS を追加する必要があります。次に、そのスタイルで必要なすべてのポップアップにこの css を適用します。CSS で !important を使用しないでください。使用できるのは 1 回だけです。そのため、 onMouseOverや無効状態などの特別な場合に備えて保持してください

1. 特別なポップアップ スタイルを作成します。

.borderlessPopup {
  border: none;
  background: transparent;
}

  • ポップアップに適用します：

    popup.addStyleName("borderlessPopup");

于 2013-10-26T17:44:38.990 に答える
1

次のような css クラスをオーバーライドする必要があります。

.gwt-PopupPanel {
    border: none !important;
    background: none !important;
 }
于 2013-10-26T16:50:45.990 に答える