0

I'm creating a popup panel in GWT to display a loading CSS animation while a RPC operation is running. To do this, I've created a popup panel using a uiBinder element. Thus, everything is working fine, but I don't know how to get rid of a white frame that "surrounds" my popup panel. Let me show you this:

enter image description here

What I want to achieve this:

enter image description here

Ok, let me show you the code from my popup panel...

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();
}
}

Here is the code from my ui.xml file:

<!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>

The CSS associated:

.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;    
}

The rest of CSS are automatically generated for the loading animation from this page. I don't think they have nothing to do with it because if I remove the divs that use those style the problem is still there..

Anybody know how to get rid of this white frame? I'm not good at all with CSS and this is so weird...I tried lots of tweaks, but none worked...

Thanks! Alex

EDIT: As suggested, I've created a new class in my main css file:

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

Modified the 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>

And I'm associating the style when I create the popup:

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

And this is the generated HTML code:

<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>

While the loading_panel style is added, GWT is adding the gwt-PopupPanel style and also this:

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

Looks like addStyleName is not overriding at all...

4

2 回答 2

1

您需要覆盖如下的 CSS 类。

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

您应该添加一个适合无边界弹出窗口的 css。然后将此 css 应用于该样式中您想要的所有弹出窗口。避免在你的 CSS 中使用 !important：你只能做一次。因此，请保留它以用于特殊情况，例如onMouseOver或禁用状态

所以概括一下：1.创建一个特殊的弹出样式：

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

  • 将其应用于您的弹出窗口：

    popup.addStyleName("borderlessPopup");

于 2013-10-26T17:44:38.990 回答