CssLayout Scrollbar

Vaadin 6 / 7 / 8
1

Hi there,

I have tried now for several days and also searched the vaadin forum, but haven’t found a solution for the following problem:

I use the dashboard example as template and tried the following:

public class SearchSymptomsView extends VerticalLayout implements View {

public SearchSymptomsView() {

        Responsive.makeResponsive(this);

        CssLayout panels = getCenterContent();
        panels.addStyleName("mystyle");
        addComponent(panels);

        setWidth("100%");
    }
...
}


panels
 is a CssLayout which contains several hundred
com.vaadin.ui.Panel
 instances.

My goal is to have this CssLayout to contain a scrollbar. This works if I add

.v-csslayout{overflow: auto;} The problem is now that EVERY CssLayout I use will have this overflow-behaviour, which is something I have to avoid.
I thought I can define the overflow-behaviour only for a specific element (
mystyle
) by replacing the above with

.v-csslayout-mystyle {overflow: auto;} However, this does not work and I have no idea how to solve this.

Any hint to the error in my reasoning would be fantastic.

Thanks a lot,
Sebastian

2

In a simple standadlone example, the above did work. I wonder if there is something specific to the dashboard demo and your styles get overridden. Try making the CSS selector a bit more specific, for example, .v-csslayout.mystyle

3

Thanks for your reply!!

There is probably something specific to the dashboard example or the valo-theme, but I am currently not able to track down the problem. Making the selector more specific also didn’t help.

According to the Chrome CSS debugging functionality the property is not overwritten (i.e. I don’t see a strikethrough). Is there another way to identify cases in which a property is overwritten?

For now I will just set the overflow parameter for all CssLayouts and try to avoid usage of CssLayouts elsewhere (if they require overflow to be hidden).

If you have any other ideas, please let me know.

Again thanks for your time and help.
Sebastian