Блог

Я разрабатываю веб-приложение в рамках 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: Изображение, показывающее проблему

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

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

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

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

Спасибо! / Макс

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

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

HTH, / Jonatan

Только теперь я заметил, что вы устанавливаете свой макет как новый макет панели. В вашем CSS-стиле «m2m-base-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 , это должно решить вашу проблему.