Window too small for content (sets scrollbars)

I’m coming from a .Net background and Vaadin is pleasingly familiar in many ways as a desktop app designer. However one of the things I find a bit odd is that I create a class for a “CustomComponent” which can have all my form content in it. But it’s not an actual usable form, in as much as it needs to be displayed within a window. And I can’t create a designable Vaadin window as far as I can see…

However, that’s not my primary issue. I’m creating a modal login CustomComponent (Form_LogonDomain) with the user and password and then in my app code I create a window and set the content to be a new Form_LogonDomain.

But when it then displays the window it is marginally too small for the content and scroll bars appear. I thought the window was supposed to automatically size itself for the content. What am I missing?

This is the code I use:
Window zWindow = new Window(“Login to Cimera”);
Form_LogonDomain zPanel = new Form_LogonDomain();
zWindow.setContent(zPanel);
System.out.println("Panel Size: " + zPanel.getWidth() + “,” + zPanel.getHeight());
System.out.println("Window size: " + zWindow.getWidth() + “,” + zWindow.getHeight());

and this is the sizes that come out:
Panel Size: 260.0,140.0
Window size: -1.0,-1.0

I’ve discovered that it only does this in the Eclipse browser and if I use Chrome it all works fine. Anyway to make the Eclipse browser behave properly?

That was a lie. Also fails to work properly in IE. Only Chrome seems to work properly

Seriously? Noone understands this problem or the solution? This is fundamental to the usability of Vaadin??

Hi all, what am I doing wrong here? Or does noone really know the answer?

It can vary quite a lot how fast a thread gets a reply. Sometimes it can be just seconds, sometimes it drags out till monts until someone answers.

First thing: You can add a CustomComponent to any layout you want. It can be used as any other component.
So you can do someVerticalLayout.addComponent(new MyCustomComponent()). If you just want to exclude some layout creation code from your main layouting-function you can make a method returning a component (like a Form in your example) [ public Form createMyForm(…){…} ]
. This way you don’t have another div around your Form if you don’t need it.
Also -1 makes sense for the Window as its size is “undefined” which as a number means -1

Now for your question:
Which Vaadin version are you using?
How did you define your CustomComponent?
I tried it using this code:

    class TestCustC extends CustomComponent{
        public TestCustC() {
            setWidth("260px");
            setHeight("140px");
            setContent(new Label("Testing"));
        }
    }

Window w = new Window();
w.setContent(new TestCustC());
addWindow(w);

and it did exactly what it should. The window was as big as the CustomComponent i defined and no scrollbars were visible until i made the window smaller manually.
Tried it with Vaadin 7.3.5.

Hi Marius - thanks for your quick response :slight_smile:

I’m using Eclipse Luna 4.4.1 with Vaadin 7.3.4

I built the login panel using the designer which generates:

[code]
public class Form_LogonDomain extends CustomComponent {

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

@AutoGenerated
private AbsoluteLayout mainLayout;

<…snipped…>

private Form_LogonDomain() {
    buildMainLayout();
    setCompositionRoot(mainLayout);

[/code][code]
@AutoGenerated
private AbsoluteLayout buildMainLayout() {
// common part: create layout
mainLayout = new AbsoluteLayout();
mainLayout.setImmediate(false);
mainLayout.setWidth(“260px”);
mainLayout.setHeight(“140px”);

    // top-level component properties
    setWidth("260px");
    setHeight("140px");

[/code]I then have code to create the window:

Window zWindow = new Window("Login to Cimera"); Form_LogonDomain zPanel = new Form_LogonDomain(); zWindow.setContent(zPanel); zWindow.setClosable(false); zWindow.setModal(true); zWindow.setResizable(false); zWindow.center(); zWindow.setDraggable(false); zWindow.setImmediate(true); Globals.ui.addWindow(zWindow); I can’t see how it differs in principle form what you were doing…

With this code the problem is only visible in IE and in the internal eclipse Browser as far as i can tell.
A quick fix would be to change:

setWidth("260px"); setHeight("140px"); to

setWidth("262px"); setHeight("142px"); The problem comes the use of the AbsoluteLayout. I can’t directly say where exactly it comes from but in every one of my project i tried to avoid the AbsoluteLayout as much as possible because i had a lot of problems with debugging code that was created using the Designer which full of them. So if you can try using other Layouts. Another benefit is that they can be used to create more dynamic layouts which can change according to screen size. Not saying AbsoluteLayout is necessarily bad but i had lots of trouble with it and other layouts can be used to produce more “modern” layouts without hard coded positions.

Another way to fix it would be to use css to maybe include margins, padding or something of the sort.

Thanks Marius - I have tried the fix and it works - the problem is if you go back to the designer it changes the sizes to be consistent… in other words it changes

mainLayout.setWidth("260px"); mainLayout.setHeight("140px"); to

mainLayout.setWidth("262px"); mainLayout.setHeight("142px"); which means the size creeps larger and then has to be manually edited again. Do you know if this has been reported as a bug (it clearly is)? Or how I would go about reporting it? Sorry - very new to Vaadin. Am I likely to find all sorts of annoyances like this on the road to Vaadin? Requiring manual workarounds or is the framework pretty good in general?

Yes i was expecting that to happen actually. Like i said it’s not a perfect solution. Can you maybe change the size of the CustomComponent and the Layout inside seperately somehow in the designer (I’m not using the designer myself so i don’t know). Another way would be to add css to the CustomComponent which adds some padding. You can add the style to your projects theme scss file and the add the Style name to your CustomComponent.
Do you even need the CustomComponent necessarily? …or would it be enough to just add your abstractlayout directly as content to the Window?
A bug ticket can be created here:
http://dev.vaadin.com/newticket
(you need to create a seperate account to create a ticket)
I don’t think that this was reported before. You should try though if the problem still occurs in the 7.4 beta …
Well when i started using Vaadin i was continously running into annoying little problems with my layouts code but if i now create a project I rarely see such problems and if I do I normally already know how to fix them wether with Java Css or even JS. Part of it comes from experience and part from the Framework being better since then. I can’t say for sure but i would assume you won’t run into lots of problems nowadays. The problem you found looked like a bug too me and it only occured (at least for me) in IE and the internal browser which are in my opinion not the best browsers for Web Applications (sry ms :wink: ). I also don’t use the Designer because i feel like i have more control over how the layout is build when doing it manually and if you “learned” how to do it it isn’t much more difficult then using the Designer.
Also i would recommend again to avoid the AbsoluteLayout as much as possible. 1 for avoiding weird behaviour and 2 because dynamic layouts are easier to do with other layouts.