html - 摆脱 GWT 弹出面板中的白框

Question

我正在 GWT 中创建一个弹出面板，以在 RPC 操作运行时显示加载 CSS 动画。为此，我使用 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 是为加载动画自动生成的 page .我不认为他们与它无关，因为如果我删除使用这些样式的 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 根本没有覆盖...

Answer 1

您需要像下面这样重写一个 css 类。

.gwt-PopupPanel {
    border: none !important;
    background: none !important;
 }