Table layout with vertical and horizontal span

[Ivan]

Hi guys,

when I use vertical and horizontal span in table layout (both in one constraint) the component is not rendered. When I remove one or another then component appears.

In example below the Button("1,3") is not rendered. What's wrong with my code pls?

Form hi = new Form("Table layout test");
        TableLayout tl = new TableLayout(2,4);
        hi.setLayout(tl);
        hi.add(new Button("1,1"));
        hi.add(new Button("1,2"));
        TableLayout.Constraint constr = tl.createConstraint();
        constr.horizontalSpan(2);
        constr.verticalSpan(2);
        hi.add(constr, new Button("1,3"));
        hi.add(new Button("2,1"));
        hi.add(new Button("2,2"));
        hi.show();

Tested in simulator.

Thanks

Ivan

[Shai Almog]

Hi,

I think the horizontal span is problematic here. You're spanning two columns but they don't have a size.

Once you span your setting to the spanned column size are removed. That's OK if you have other cells within the column the size can be calculated but if you span over columns where there's no "regular" cell then we have no way of knowing what size of column you wanted. Bot columns end up being 0 width and aren't shown.

[Ivan]

what options do I have to display it? I tried to revalidate after all cell are populated but without effect

Dátum: štvrtok 12. novembra 2020, čas: 3:33:28 UTC+1, odosielateľ: Shai Almog

[Ivan]

I added one extra row of height 1% to make horizontal span working and it looks quite good.

If there is no real solution I can use this dirty workaround.

Dátum: štvrtok 12. novembra 2020, čas: 10:15:12 UTC+1, odosielateľ: Ivan

[Shai Almog]

I'm actually surprised this works for you. From the code it looks that the columns would be broken not the rows but maybe this is different from the actual code you're using.

[Ivan]

the code is the same, I've just added one row and tile 1,3 appeared:

Form hi = new Form("Table layout test");
        TableLayout tl = new TableLayout(2,4);
        hi.setLayout(tl);
        hi.add(new Button("1,1"));
        hi.add(new Button("1,2"));
        TableLayout.Constraint constr = tl.createConstraint();
        constr.horizontalSpan(2);
        constr.verticalSpan(2);
        hi.add(constr, new Button("1,3"));
        hi.add(new Button("2,1"));
        hi.add(new Button("2,2"));
        

        TableLayout.Constraint constr2 = tl.createConstraint();
        constr2.setHeightPercentage(1);
        hi.add(constr2, new Button(" "));
        hi.add(new Button(" "));
        hi.add(new Button(" "));
        hi.add(new Button(" "));
      
        hi.show();

Dátum: piatok 13. novembra 2020, čas: 5:13:19 UTC+1, odosielateľ: Shai Almog

[Shai Almog]

This worked because you added 4 buttons. It has nothing to do with the 1 percent height. It has everything to do with the fact that you created 4 columns. Before that column 3 and 4 didn't "really" exist since nothing was added there.

[Ivan]

Yes I understand. As I don't need the last row I need to make it thin enough to be "invisible" in full screen. That's the only reason I did it 1% high. Now it looks OK.

Dátum: sobota 14. novembra 2020, čas: 6:51:03 UTC+1, odosielateľ: Shai Almog