How to make scrollbars appear on a panel (if it doesn't fit the display)?

The first version of the application that I am trying to write looks very similar to the Vaadin “Simple CRM” example from the tutorial, i.e. there is initially a table of entries and if one selects one of them, then the right half of the display turns into a vertical list of fields (implemented by deriving from the very same AbstractForm<…>-class as in the tutorial) allowing to edit the individual fields of that entity (sounds familiar? :wink: ).

The issue I am having is that the number of fields in my case is higher than in the example application (about 20 fields) and thus the list is longer than what fits the screen and the three buttons (save/delete/cancel) are thus typically below the visible area (unless one as a HUGE screen).

The problem is that in that case no scrollbars appear and hence one can not scroll down to those buttons!
One can only reach them and make them visible by focusing on one of the fields and then tabbing through the elements and if one tabs beyond the last visible field then the entire display is moved up and eventually the thee buttons become visible.

I need some guidance as what I need to do to make a vertical scrollbar appear in such cases so that one can scroll down to reach those buttons. Funny enough, the left-hand side table
does
get scrollbars (vertical AND horizontal) when necessary.

Even better were, if the buttons were always visible at the bottom of the right half of the screen and only the field list itself would adjust its height and had a scrollbar when it does not fit, but let’s start simple for a first step.

Trying to sketch the above:

Title Edit-area:
[ row1 ]
field1: []

||
-
| row2 | field2: [
]

||
only, say, this part fits the screen
[ row3 ]
field3: []

||
- /
field4: [
]

||

field5: [_______________]

||
← some scrollbar needed here for the edit-area!
[ Save]
[ Delete ]
[ Cancel ]

||

Multiple ways to solve this. Simple way is to use a vertical layout out on the right side. Set the vertical layouts height and width to 100% making sure it fills the available space. Inside this vertical layout, add a Panel (panel will provide the scroll bar you need for your list of fields) with its size set to 100% and your button bar(horizontal layout with buttons in it). Make sure you set the expand ration on the Panel to 1 as you want the panel to fill up as much space as it can pushing your button bar to the bottom. You can do this by doing verticalLayout.setExpandRatio(panel, 1);

Hope this gives you a start.

Hi Tetris Dev! Thanks for responding.
Unfortunately I am “standing on the hose” (German for “no flow” - i.e. I don’t get it):

I tried to follow your advice, i.e. put my form inside a panel, set the panel to 100% and set the expand ratio on the panel to 1:

// this is inside a class extending from "org.vaadin.viritin.form.AbstractForm<T>":
...
protected Component createContent() {
    FormLayout fl = new FormLayout(formFields);
    Panel panel = new Panel(fl);
    panel.setHeight(100, Unit.PERCENTAGE);
    VerticalLayout vl = new VerticalLayout();
    vl.addComponents(new Header("Some Header").setHeaderLevel(3),
                     panel,
                     getToolbar());
    vl.setExpandRatio(panel, 1.0f);
return vl;
}
...

The component generated above is then added to a HorizontalLayout like so:

main.addComponents(someTable, theAboveGeneratedComponent);

But unfortunately no joy. The right side yields exactly the same list as before expanding beyond the bottom of the screen and no scrollbars…

What am I missing?

What I find increasingly annoying with Vaadin is, that there seems to be no authoriative, accurate and up-to-date documentation! Whatever I dug up so far is either outdated or simply plain wrong!

E.g. the online Vaadin handbook (
https://vaadin.com/book/vaadin6/-/page/layout.components.panel.html
) shows an example that’s supposed to show scrollbars:

.. // The panel will give it scrollbars. The root layout // (VerticalLayout) must have undefined width to make the // horizontal scroll bar appear. Panel panel = new Panel("Embedding"); panel.setWidth("400px"); panel.setHeight("300px"); panel.getContent().setSizeUndefined(); panel.addComponent(image); ... But Panel -at least the version that I am using -

has no

method addComponentI…) method!
Probably this has changed on v7.x. But there seems to be no decent documentation on v7!

The only approach is trial and error and I have already wasted way to much time on a task that should be really trivial with any decent UI framework! :frowning:

For a panel, you will have to use the setContent method instead of addComponent. If you want, I could quickly join you in a online meeting such as webex and help you out. Shouldn’t take long. My email is nelsond6@gmail.com. Shoot me an email if you want to set something up. I would be happy to help.

-Dan

Thanks for that offer! I appreciate it and might refer to it another time. :slight_smile:
I was able to solve THIS issue by setting the height of the

containing

component (a TabPane) to 100%!
So the issue was obviously, that the current (or maximum) size was not communicated down into the Panel and the Panel thus did not activate the scrollbars. These layouts can be pretty tricky sometimes, but now it works as expected!

Cheers,
Michael

Hope this gives you a start.
Actually: it helped tremendously! After at first struggling for quite a while with layouting in Vaadin - meditating about your append caused several enlightenments! :slight_smile: Thanks a lot!

Michael