Cannot set Grid width and height

Hello,
I have following code where model is a BeanItemContainer already filled with data:

   [code]

sitesList = new Grid();
sitesList.setContainerDataSource(model);
sitesList.removeAllColumns();
sitesList.addColumn(“code”);
sitesList.addColumn(“name”);
sitesList.addColumn(“lon”);
sitesList.addColumn(“lat”);
sitesList.addColumn(“siteURL”);
sitesList.setWidth(“100%”);
sitesList.setHeight(“1000px”);
[/code]
But unfortunately the grid size is always 500x400 px
Can you help me?

Well, it’s hard to say what the problem could be from your description. Maybe you change the size later somehow?

Also your layout affects the sizes, especially as you’re using relative size, and you’re not mentioning your layout hierarchy there.

It is a demo app, I simply add it to a vertical layout and nothing else

l = new VerticalLayout();
        l.setSizeFull();
        sitesList = new Grid();
        
        sitesList.addItemClickListener(this);
        l.addComponent(sitesList);

        setCompositionRoot(l);
sitesList.setContainerDataSource(model);
        sitesList.removeAllColumns();
        sitesList.addColumn("code");
        sitesList.addColumn("name");
        sitesList.addColumn("lon");
        sitesList.addColumn("lat");
        sitesList.addColumn("siteURL");
        sitesList.setWidth("100%");
        sitesList.setHeight("1000px");

This is the code of the view part. The app is a simple demo that runs as liferay portlet and call one liferay api (so I cannot run as simple web app)
Looking the css it seems that it is the grid that sets itself at 400px its container do not set that width.

One problem could be that you are setting the VL as full size, but you are apparently using it in a CustomComponent, which you do not set to full size, so it has undefined (default) size. You are not allowed to have relative-sized component (the VL) inside a component with undefined size (the CC). I recommend opening the ?debug window and running the “Analyze Layouts” if you have more such problems.

Also, the VL has 100% height, but the Grid has fixed height. Therefore, the Grid will overflow the VL vertically if there is not enough height for it.

What do you mean by CSS? Do you mean in the theme (styles.css) or with the style=“” attribute? Note that the attribute can be generated automatically by layout calculations.

I also a problem that like Mario’s one. I set whle component size full, then browser show it to me with full size but size of columns cannot fit the table during the size of page is stable. When the page size is changed columns being fit the table size. I solve this problem with using javascript. Call server from client side after rendering and change the with of table and then all columns fit the table. Bu i don’t like this solution, if anyone know better one, plese share with me.

Thank you

My code to build grid

table = new Grid();
table.setSizeFull();
table.addColumn(“id”, Integer.class);
table.addColumn(“htmlContent”, String.class);
table.addColumn(“detail”, Resource.class);
table.addColumn(“delete”, Resource.class);
table.getColumn(“detail”).setMinimumWidth(100);
table.getColumn(“delete”).setMinimumWidth(100);

    Column htmlColumn = table.getColumn("htmlContent");
    htmlColumn.setRenderer(new HtmlRenderer());
    htmlColumn.setHeaderCaption("Özgeçmişlerim");
    htmlColumn.setExpandRatio(3);

content.setSizeFull();
content.addComponent(table);
table.setSizeFull();

21837.png
21838.png

Only way around it for me was to setSizeFull(), then setHeight()
I needed it to be 100% width of the container.

actually. I seem to have found it. I had to set the HeightMode!:

grid.setHeightMode(HeightMode.ROW);
grid.setHeightByRows(corpCompanyContainer.size() > 7 ? 7 : corpCompanyContainer.size());