Избавьтесь от белой рамки в всплывающей панели GWT

0

Я создаю всплывающую панель в GWT для отображения загружаемой анимации CSS во время работы RPC. Для этого я создал всплывающее окно с использованием элемента uiBinder. Таким образом, все работает нормально, но я не знаю, как избавиться от белого кадра, который "окружает" мою всплывающую панель. Позвольте мне показать вам следующее:

Изображение 174551

Что я хочу достичь:

Изображение 174551

Хорошо, позвольте мне показать вам код из моей всплывающей панели...

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 не отменяет вообще...

Теги:
gwt

2 ответа

1
Лучший ответ

вам нужно переопределить класс css, например, ниже.

.gwt-PopupPanel {
    border: none !important;
    background: none !important;
 }
  • 0
    Вау, я только что добавил это, и это работает! Похоже, вам определенно нужно переопределить класс gwt-PopupPanel, спасибо Mayank !! Теперь я действительно не знаю, кому дать правильный ответ здесь: D
1

Вы должны добавить css, который подходит для всплывающих окон без полей. Затем примените этот css ко всем всплывающим окнам, которые вы хотите в этом стиле. Избегайте использования! Важно в вашем css: вы можете сделать это только один раз. Поэтому сохраните его для особых случаев, таких как onMouseOver или отключенное состояние

Итак, чтобы воспроизвести: 1. создать специальный всплывающий стиль:

.borderlessPopup {
  border: none;
  background: transparent;
}
  • примените его к вам всплывающие окна:

    popup.addStyleName( "borderlessPopup");

  • 0
    Привет! Я добавил этот класс css в свой текущий файл css и добавил стиль при создании всплывающего окна, но без эффектов ... Я все еще вижу белую рамку ... выглядит, что стиль не применяется к родительскому g: HTMLPanel вообще ...
  • 0
    Привет, ты проверил, что происходит в firebug? (плагин firefox для просмотра html, css и js страницы) У вас должен быть div для вашей popupPanel PopupPanel. Мы используем popupPanel.setStyleName ("CategoriesPopup"); который полностью удаляет стиль всплывающего окна по умолчанию, вы можете попробовать это, чтобы проверить, откуда возникла проблема, но вам определенно следует перейти к своему HTML-коду результата и разобрать происходящее
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню