Scollbars in CustomComponent.

Hi,

I am sorry if I am asking this again.

I have created a CustomComponent using Vaadin eclipse editor. Works awesome! However, I am not able to get the scrollbars to work with it. My main layout is Absolute layout and I just dragged and dropped the components on it. I did tried using a Panel inside the main layout but still no luck. Is there a way to get scrollbars working on the main layout i.e absolute layout in my case. I have also tried this, but this adds scrollbars on the components not on layout.

.v-absolutelayout { overflow: auto; } .v-absolutelayout-wrapper { overflow: auto; } Thanks,
Prat

Hi!

You should not need any extra css for this. Would this thread help you:
https://vaadin.com/forum/#!/thread/8420853
?

Hi Johan,

Thanks for the reply. I did tried that solution, but I am not able to get the scrollbars to work, Here what the Vaadin Editor gives me. The main layout is full sized and inside panel is full sized, now I changed the layout of panel from vertical to absolute and set the width and height in pixels.

public class TestView extends CustomComponent implements View{

    /*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */

    @AutoGenerated
    private AbsoluteLayout mainLayout;
    @AutoGenerated
    private Panel panel_3;
    @AutoGenerated
    private AbsoluteLayout absoluteLayout_3;
    @AutoGenerated
    private RichTextArea richTextArea_1;
    @AutoGenerated
    private PopupDateField popupDateField_1;
    @AutoGenerated
    private InlineDateField inlineDateField_1;
    @AutoGenerated
    private ComboBox comboBox_1;
    @AutoGenerated
    private Accordion accordion_1;
    @AutoGenerated
    private Button button_3;
    @AutoGenerated
    private Button button_2;
    @AutoGenerated
    private Button button_1;
    /**
     * The constructor should first build the main layout, set the
     * composition root and then do any custom initialization.
     *
     * The constructor will not be automatically regenerated by the
     * visual editor.
     */
    public TestView() {
        buildMainLayout();
        setCompositionRoot(mainLayout);
    }

    @Override
    public void enter(ViewChangeEvent event) {
        // TODO Auto-generated method stub
        
    }

    @AutoGenerated
    private AbsoluteLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new AbsoluteLayout();
        mainLayout.setImmediate(false);
        mainLayout.setWidth("100%");
        mainLayout.setHeight("100%");
        
        // top-level component properties
        setWidth("100.0%");
        setHeight("100.0%");
        
        // panel_3
        panel_3 = buildPanel_3();
        mainLayout.addComponent(panel_3, "top:0.0px;left:0.0px;");
        
        return mainLayout;
    }

    @AutoGenerated
    private Panel buildPanel_3() {
        // common part: create layout
        panel_3 = new Panel();
        panel_3.setImmediate(false);
        panel_3.setWidth("100.0%");
        panel_3.setHeight("100.0%");
        
        // absoluteLayout_3
        absoluteLayout_3 = buildAbsoluteLayout_3();
        panel_3.setContent(absoluteLayout_3);
        
        return panel_3;
    }

    @AutoGenerated
    private AbsoluteLayout buildAbsoluteLayout_3() {
        // common part: create layout
        absoluteLayout_3 = new AbsoluteLayout();
        absoluteLayout_3.setImmediate(false);
        absoluteLayout_3.setWidth("1920px");
        absoluteLayout_3.setHeight("1080px");
        
        // button_1
        button_1 = new Button();
        button_1.setCaption("Button");
        button_1.setImmediate(true);
        button_1.setWidth("-1px");
        button_1.setHeight("-1px");
        absoluteLayout_3.addComponent(button_1, "top:553.0px;left:874.0px;");
        
        // button_2
        button_2 = new Button();
        button_2.setCaption("Button");
        button_2.setImmediate(true);
        button_2.setWidth("-1px");
        button_2.setHeight("-1px");
        absoluteLayout_3.addComponent(button_2, "top:373.0px;left:779.0px;");
        
        // button_3
        button_3 = new Button();
        button_3.setCaption("Button");
        button_3.setImmediate(true);
        button_3.setWidth("-1px");
        button_3.setHeight("-1px");
        absoluteLayout_3.addComponent(button_3, "top:153.0px;left:439.0px;");
        
        // accordion_1
        accordion_1 = new Accordion();
        accordion_1.setImmediate(false);
        accordion_1.setWidth("-1px");
        accordion_1.setHeight("-1px");
        absoluteLayout_3.addComponent(accordion_1, "top:589.0px;left:279.0px;");
        
        // comboBox_1
        comboBox_1 = new ComboBox();
        comboBox_1.setImmediate(false);
        comboBox_1.setWidth("-1px");
        comboBox_1.setHeight("-1px");
        absoluteLayout_3.addComponent(comboBox_1, "top:635.0px;left:619.0px;");
        
        // inlineDateField_1
        inlineDateField_1 = new InlineDateField();
        inlineDateField_1.setImmediate(false);
        inlineDateField_1.setWidth("-1px");
        inlineDateField_1.setHeight("-1px");
        absoluteLayout_3.addComponent(inlineDateField_1,
                "top:645.0px;left:337.0px;");
        
        // popupDateField_1
        popupDateField_1 = new PopupDateField();
        popupDateField_1.setImmediate(false);
        popupDateField_1.setWidth("-1px");
        popupDateField_1.setHeight("-1px");
        absoluteLayout_3.addComponent(popupDateField_1,
                "top:619.0px;left:59.0px;");
        
        // richTextArea_1
        richTextArea_1 = new RichTextArea();
        richTextArea_1.setImmediate(false);
        richTextArea_1.setWidth("-1px");
        richTextArea_1.setHeight("-1px");
        absoluteLayout_3.addComponent(richTextArea_1,
                "top:139.0px;left:519.0px;");
        
        return absoluteLayout_3;
    }

}

Hi Johan,

I think I it figure out. I changed the main layout to be vertical layout and added a panel set it layout to absolute and set width and height in pixels and it works now I see both vertical and horizontal scrollbars.

Thanks!
Prat
16906.png