Panel's setScrollable for Vaadin 7

what is alternative for panel’s setScrollable(true) property in Vaadin 7…?
Vaadin 7 does not have setScrollable method for panel…!!!

The method was removed in Vaadin 7. The Panel is always scrollable now, so you should not need to set it at all. If your panel’s content is larger than the panel, it should show scroll bars automatically.

Hello,

I am migrating a project from 6.8.6 to 7.1.0.

I am dealing with a Panel which is put in a Window (with setContent()), which is added to my UI (thus it is a subwindow)

The Panel as well as the Window have undefined sizes.

In Vaadin 6, I used setScrollable(true) for both Panel and Window, which I understand is no longer needed in vaadin 7 since it is now the automatic behavior.

I only use 2 properties for my window :
setModal(true)
and setRezisable(true)

My problem is that with vaadin 7, if my content is too big for the browser’s viewable area, I do not get the scrollbars. This works well with vaadin 6 + setScrollable(true).

It also happens that if a maximize my subwindow and then reduce it (using the maximize square button, at the left of the cross button), I get the scrollbar.

It also happens that if I set modal to false, when my subwindow is displayed (without the scrollbars), I just have to click any button or link from my main window and the scrollbar magically appears.

Did I miss something or is it a real issue ?

Thanks for your answers

Panel.setScrollable() never did what people expected it to do based on the name. In particular, it had nothing to do with scrollbars and 99% of users never needed to call it for any reason.

Why the scrollbars appear or not depends on the layouts and sizes you use.

suggests that this is probably one of the many scrollbar related browser bugs - we do have workarounds in Vaadin for many such. At least various versions of IE and Safari have their share of these.

Please try with Vaadin 7.1.1, and if it does not work, specify the exact browser version you are using. I do recall there was a new ticket for one such specific situation recently, but can’t recall the details - there are
about 30 open issues
related somehow to scrollbars, many of which about extra scrollbars or missing scrollbars in specific situations in specific browsers, though many are also about our automated tests and their reference images for some Vaadin version rather than the functioning of the framework and browsers.

Without information about the browser version used and a small sample program that demonstrates the issue, it is usually not possible for us to reproduce and fix such issues.

Thanks Henri for your reply. I’ve been doing some more tests with the following code, which reflects what I do in my application :
[font=Courier New]

getContent().addComponent(new Label("getBrowserWindowHeight : " + UI.getCurrent().getPage().getBrowserWindowHeight()));
getContent().addComponent(new Label("getBrowserWindowWidth : " + UI.getCurrent().getPage().getBrowserWindowWidth()));
getContent().addComponent(new Label("getBrowserApplication : " + UI.getCurrent().getPage().getWebBrowser().getBrowserApplication()));
getContent().addComponent(new Label("getBrowserMajorVersion : " + UI.getCurrent().getPage().getWebBrowser().getBrowserMajorVersion()));
getContent().addComponent(new Label("getBrowserMinorVersion : " + UI.getCurrent().getPage().getWebBrowser().getBrowserMinorVersion()));

final Window popup = new Window(“”);
popup.setModal(true);
popup.setResizable(true);
popup.center();
popup.setImmediate(true);

Panel panel = new Panel();

VerticalLayout vl = new VerticalLayout();
vl.setMargin(true);
vl.setSpacing(true);

VerticalLayout tab = new VerticalLayout();
tab.setMargin(true);
tab.setSpacing(true);

for(int i=0;i<20;i++)
tab.addComponent(new TextField(String.valueOf(i)));

//OPTION 1
TabSheet ts = new TabSheet();
ts.addTab(tab);
vl.addComponent(ts);

//OPTION 2
//vl.addComponent(tab);

panel.setContent(vl);
popup.setContent(panel);

UI.getCurrent().addWindow(popup);

Button button = new Button(“click”, new Button.ClickListener()
{
private static final long serialVersionUID = -1415700633152682999L;

@Override
public void buttonClick(ClickEvent event)
{
	UI.getCurrent().addWindow(popup);
}

});
getContent().addComponent(button);

[/font]
which I added to my main view (getContent() returns the main component in my view).

I add a sub window at startup, and the exact same one on a button click.

I’ve tested it on 5 different browsers :

  • chrome 28.0 (user-agent : Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36)

  • firefox 22.0 (user-agent : Mozilla/5.0 (Windows NT 6.1; rv:22.0) Gecko/20100101 Firefox/22.0)

  • ie 9.0 (user-agent : Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0))

  • safari (user-agent : Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2)

  • opera 11.64 (user-agent : Opera/9.80 (Windows NT 6.1; U; fr) Presto/2.10.229 Version/11.64)

Now I can see different things :

1/ the popup does whether show full size (chrome, ie, safari) or show a too narrow width (firefox, opera)
2/ in all browsers except opera, I get the scrollbar on the left of the popup, at startup
3/ in all browsers, I don’t get the scrollbar when I display the popup by clicking on the “click” button.
4/ when I don’t use the tabsheet (OPTION 2 in my code instead of OPTION 1), everything is fine, with all browsers (popup gets the right width and scrollbar appears at startup as well as on click)

attached are screenshots illustrating these observations. (on ie and safari, I have exactly the same behavior as on chrome, that is why you don’t have screenshots for these browsers)

My comments after observing this is that my issue is in fact not necessarily directly a scrollbar issue with a panel or window, but rather a tabsheet issue, the scrollbar not appearing being a consequence of that.

what do you think ? If you need some more tests or information, please don’t hesitate.

PS : the width issue is not my main concern here since I can avoid it by giving a fixed width to my tabsheet for exemple; even if that’s not what I’d prefer to do.
13118.png
13119.png
13120.png
13121.png
13122.png
13123.png
13124.png

Please do not hijack an old thread for an unrelated issue but create a new thread.

Panel in Vaadin 7 can contain a single component, which is set with setContent(Component). If you want to have multiple components in a Panel, set a layout as that component and add other components to it. (Panel in Vaadin 6 implicitly used a layout and had the method addComponent(Component).)

Hi,
Actually i create 1 Window then i create 1 VerticalLayout then 2 HorizontalLayout then i add both layout 1,2 in VerticalLayout

then i add in panel in this actually need scrollbar in 2 HorizontalLayout but i dont need in 1 verticalLayout. now scroll bar comes in full Window. i need 1 verticallayout fixed and 2 HorizontalLayout need scroll bar
1 VerticalLayout have 2 Panel Please help me

I have the very same problem. Here is my layout for the window:

    verticalLayout.setMargin(true);
    verticalLayout.setWidth("100%");
    verticalLayout.setHeight("10000px");
    Panel panel = new Panel();
    panel.setContent(verticalLayout);
    setCompositionRoot(panel);        

The vertical layout does have 10000px height. I can see this, because some components in the vertical layout are not visible.

But there is no scrollbar at all! I have also tried to call these in all possible combinations:

  • verticalLayout.setHeightUndefined();
  • panel.setHeightUndefined();
  • panel.setFullSize();

I have tried the same page in Chrome, Opera and Firefox. None of them helped.

As far as I understand, panels in Vaadin 7 should always have a scrollbar when the content does not fit. In my example, the content does not fit (nobody has a screen with 10000+px height). But the scrollbars do not show up!

Please help me! My partners want me to fix this today, and I’m lost. :frowning: