CODEWITHSUNDEEP
imagevaadin8
cbmeeks
cbmeeks

Reputation: 11420

Vaadin refuses to align image in a HorizontalLayout

I'm using Vaadin 8 and I have a HorizontalLayout at the very top of the page. It's in a VeritcalLayout which is the main content of the UI.

Something like:

UI
    VerticalLayout (margin=false, spacing=false)
        HorizontalLayout (margin=false, spacing=false)

So you would expect everything to align to the edges of the browser viewport. I also have set default component alignment on everything to TOP LEFT.

Now, I want to put an image in the upper-right of that HorizontalLayout. The image aligns to the right of the screen as expected but the top of the image has about 30-40 pixels of padding that I cannot get rid of.

Imagine the black box as the logo I am using:

enter image description here

My UI init:

@SpringUI
@Theme("valo")
@PushStateNavigation
public class CustomUI extends UI implements ViewDisplay {
    private static final long serialVersionUID = -3026091945679596519L;

    @Autowired
    private SpringViewProvider viewProvider;

    @Autowired
    private SpringNavigator navigator;


    @Override
    protected void init(VaadinRequest vaadinRequest) {
        setSizeFull();

        final VerticalLayout root = new VerticalLayout();
        root.setMargin(false);
        root.setSpacing(false);
        root.setSizeFull();
        setContent(root);

        navigator.init(this, root);
    }

    @Override
    public void showView(View view) {
        this.setContent((Component) view);
    }

My HorizontalLayout:

    HorizontalLayout layout = new HorizontalLayout();
    layout.setMargin(false);
    layout.setSpacing(false);
    layout.setHeight(64, Unit.PIXELS);
    layout.setWidth("100%");

    String basePath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
    FileResource logo = new FileResource(new File(basePath + "/WEB-INF/images/logo.PNG"));

    Image logoImg = new Image("", logo);

    layout.addComponent(logoImg);
    layout.setComponentAlignment(logoImg, Alignment.TOP_RIGHT);

The image is 64 pixels tall. The HorizontalLayout is also 64 pixels tall according to the debugger. But notice how far off it is on the top.

What am I doing wrong?

Upvotes: 0

Views: 202

Answers (2)

tremendous7
tremendous7

Reputation: 751

just change

Image logoImg = new Image("", logo);

into

Image logoImg = new Image(null, logo);

Components in a HorizontalLayout have their caption on top of the component. If the caption is not null, i.e. it is empty it does take the aforementioned 30-40 pixels.

Upvotes: 1

Tatu Lund
Tatu Lund

Reputation: 10633

For me it looks like it looks like that UI itself still has margin. So you need to disable in.

@Override
protected void init(VaadinRequest vaadinRequest) {
    setSizeFull();
    setMargin(false); // this was missing

    final VerticalLayout root = new VerticalLayout();
    root.setMargin(false);
    root.setSpacing(false);
    ...
}

Upvotes: 0

Related Questions