CODEWITHSUNDEEP
javavaadin
Kerb
Kerb

Reputation: 1168

How do I make vaadin do not show scrollbars (when using setSizeFull for main layout)

Given the following vaading example app:

package net.kerba.vaadin7interface;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.*;

import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;

/**
 * Created by IntelliJ IDEA.
 * Date: 19.11.13
 * Time: 20:48
 */

@Theme("runo")
public class MainUi extends UI {

    @Override
    protected void init(VaadinRequest request) {

        GridLayout main = new GridLayout();
        main.setSizeFull();
        main.setMargin(false);

        Panel panel = new Panel("Working area");
        main.addComponent(panel, 0, 0);

        // magic goes in 2 lines below
        panel.setWidth("500px");
        panel.setHeight("300px");

        panel.setContent(new Label("foobar");", ContentMode.PREFORMATTED));

        main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
        setContent(main);
    }

    @WebServlet(name = "vaadinServlet",
            urlPatterns = {"/app/*", "/VAADIN/*"},
            asyncSupported = false,
            initParams = {@WebInitParam(
                    name = "widgetset",
                    value = "com.vaadin.DefaultWidgetSet"
            )}
    )
    @VaadinServletConfiguration(productionMode = false, ui = MainUi.class)
    public static class Servlet extends VaadinServlet {

    }
}

When I use % for width and height: 

panel.setWidth("50%");
panel.setHeight("50%");

I get both scrollbars:

enter image description here

When I use pixels for width and height:

panel.setWidth("500px");
panel.setHeight("300px");

The both scrollbars are gone:

enter image description here

How can I use % for width and height and make Vaadin do not show that scrollbars?

Vaadin 7.1.8

Upvotes: 4

Views: 5557

Answers (3)

D3X
D3X

Reputation: 547

I am not very sure about the solution, but while referring online. I found a couple of links, which I think can help you solve the problem:

Link 1

Link 2

According to which 

main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

makes it to be in the middle of the screen i.e, actually half of the panel defined.

  1. You can go about either creating another panel with different specifications or use a virtual view to work around with this, ie. A Grid Layout that would just be used to format the indents and customize it effectively to your use.
  2. Use HGap, VGap and then set the alignment. Refer this example
  3. Use an entirely different layout completely, some change in the current specification for layout positioning.

Upvotes: 0

dzezzz
dzezzz

Reputation: 1005

It's because with GridLayout writing

main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

it sets in fact gridlayout-slot in the middle of the screen making it 100% size of your screen and from this 50% is your panel - for me it seems to be a bug...

The workaround would be to use different layout, with VerticalLayout it will work. Or fake grid layout with CustomLayout.

Upvotes: 1

Piotr Górny
Piotr Górny

Reputation: 61

I've found that introducing your own theme by extending e.g. runo or reindeer always pays. Then having this you can declare a class on you panel and set its width/height in CSS rather than in the code. This way it's the browser which sets the size before any JS executes and so it's known before JS that scrollbars are not needed in this case.

Upvotes: 1

Related Questions