Я создаю всплывающую панель в GWT для отображения загружаемой анимации CSS во время работы RPC. Для этого я создал всплывающее окно с использованием элемента 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 автоматически генерируются для загрузки анимации с этой страницы. Я не думаю, что они не имеют к этому никакого отношения, потому что если я удалю divs, которые используют этот стиль, проблема все еще там.
Кто-нибудь знает, как избавиться от этой белой рамки? Я плохо разбираюсь в CSS, и это так странно... Я пробовал много настроек, но никто не работал...
Благодарю! Alex
EDIT: Как было предложено, я создал новый класс в моем основном файле 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>
Пока добавляется стиль load_panel, GWT добавляет стиль gwt-PopupPanel, а также это:
style="left: 649px; top: 444px; visibility: visible; position: absolute; overflow: visible;"
Похоже, что addStyleName не отменяет вообще...
вам нужно переопределить класс css, например, ниже.
.gwt-PopupPanel {
border: none !important;
background: none !important;
}
Вы должны добавить css, который подходит для всплывающих окон без полей. Затем примените этот css ко всем всплывающим окнам, которые вы хотите в этом стиле. Избегайте использования! Важно в вашем css: вы можете сделать это только один раз. Поэтому сохраните его для особых случаев, таких как onMouseOver или отключенное состояние
Итак, чтобы воспроизвести: 1. создать специальный всплывающий стиль:
.borderlessPopup {
border: none;
background: transparent;
}
примените его к вам всплывающие окна:
popup.addStyleName( "borderlessPopup");