Problems with IE: Position Absolute

Flow
1

Hello everybody

If I use the css tag “position: absolute” I get problems in all versions of IE.
Here is a short example:

package com.test;

import com.vaadin.Application;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class TestApplication extends Application {
    
    public Window window;
    
    @Override
    public void init() {
        window = new Window("Test Application");
        setMainWindow(window);
        window.setTheme("test-theme");
        
        buildWindow();
    }
    
    private void buildWindow() {
        Label l = new Label("Test");
        window.addComponent(l);
    }
}

And the css file that belongs to that theme:

@import "../reindeer/styles.css";

.v-verticallayout {
    overflow: visible !important;
}

.v-label {
    position: absolute;
    top: 50px;
    left: 50px;
}

It’s fine for any browser except IE. Any idea how it works with IE?

2

You are doing a lot of CSS that isn’t really that well supported by Vaadin. Because Vaadin layouts “just works” without any need to write CSS, it also restricts a bit on what you can do with CSS. For example, the overflow: visible, wrap the layout into a panel, and put the layouts height to undefined with setHeight(null);. Panels are used to get scrolling to layouts as layouts don’t support scrolling directly.

For the absolute positioning, you can use AbsoluteLayout instead of VerticalLayout, and use the API of that to position the component at top:50px,left:50px. Also if it is just margins at top and left that you want, then you can add padding according to how the Book of Vaadin instructs you to do it for VerticalLayouts.

Doing the things you want in Java guarantees that it will work in all browsers. Doing it with custom CSS might break support in some browsers if you are not familiar with Vaadin internals. You posting this question about this is a good proof of that. :slight_smile: Hopefully Vaadin 7 will make theming your own way a lot easier (it is planned).