Ваадин компонент добавили дважды по некоторым причинам - PullRequest
Новая
       7

Ваадин компонент добавили дважды по некоторым причинам

1 голос
/ 18 октября 2011

Я разрабатываю веб-приложение в рамках Vaadin.По моему мнению, в моем приложении очень странное поведение, с которым, я надеюсь, некоторые из вас знакомы или знают, как обойти это.

Это соответствующий код: 

        AbstractComponent horizontalLine = Cf.horizontalLine();
        horizontalLine.addStyleName("m2m-horizontal-line-list-separator");
        horizontalLine.setWidth("100%");
        horizontalLine.setParent(null);
        SVerticalLayout spacer = Cf.vLayout(new SLabel(""));
        spacer.setMargin(true);

        CssLayout cssLayout = new CssLayout();

        cssLayout.addStyleName("m2m-css-style");
        cssLayout.addComponent(inventoryFilterPanel);
        cssLayout.addComponent(horizontalLine);
        cssLayout.addComponent(simCardTable);

        Panel basePanel = new Panel("");
        basePanel.setContent(cssLayout);
        basePanel.addStyleName("m2m-base-panel");
        basePanel.setSizeFull();
        basePanel.getContent().setSizeUndefined();

        addStyleName("m2m-tab-main-view");
        setMargin(false);
        addComponent(basePanel);
        setExpandRatio(basePanel, 1);

РЕДАКТИРОВАТЬ: Добавление соответствующего CSS: 

.m2m-horizontal-line-list-separator {
    width: 97%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.m2m-css-style {
    margin: 10px;
}

.v-panel-content-m2m-base-panel .v-verticallayout  {
    min-width: 100%;
}

.m2m-tab-main-view {
/**Didn't have any CSS inside it*/
}

РЕДАКТИРОВАНИЕ 2: Изображение, показывающее проблему

enter image description here

РЕДАКТИРОВАНИЕ 3: Снимок экрана сгенерированной разметки из Firebug

enter image description here

В разметке вы видите: -Панель, содержащую CssLayout.-Внутри CssLayout у нас есть первый экземпляр строки, который не должен быть там, который также отмечен.- Следующий div это VerticalLayout, который содержит filterPanel.-Далее у нас есть строка, которая является правильной, и, наконец, у нас есть таблица.

Абстрактный компонент 'горизонтальная линия' работает как разделитель для разделения компонента filterPanel и таблицы.Согласно коду он добавляется один раз, однако по какой-то странной причине в браузере он добавляется два раза.Один экземпляр добавляется там, где я хочу, а другой добавляется в верхнюю часть cssLayout, над всем остальным!Безумно верно !?= P

Понятия не имею, почему это так.Как видно из кода, есть только один его экземпляр, и он добавляется только один раз ... Кто-нибудь имеет представление о том, что происходит?

Спасибо!/ Max

Ответы [ 2 ]

3 голосов
/ 18 октября 2011

Трудно сказать, что происходит с кодом, который вы предоставили.Я полагаю, что CSS, который фактически отображает горизонтальную линию, перетекает в какой-то другой компонент / макет, или у вас есть ошибка в ваших правилах CSS.

В любом случае, пожалуйста, добавьте соответствующие части вашего CSS к вопросуесли вы уже не поняли.

HTH, / Jonatan

0 голосов
/ 19 октября 2011

Только сейчас я заметил, что вы установили свой макет как новый макет Panel. В вашем стиле CSS "m2m-base-panel" вы можете не переписывать некоторые базовые стили Panel с границами рисования вокруг макета содержимого Panel. 

//This CSS part draw around Panel content layout border, 
//with I think you see "upper top of the cssLayout"        
.v-panel-content {
    border: 1px solid #BABFC0;
    //Some other style depends on with Vaadin theme you use
}

Попробуйте добавить к вашей панели стиль Runo.PANEL_LIGHT или Reindeer.PANEL_LIGHT, это должно решить вашу проблему.

...