issue with container dimensions when using a tablelayout inside multiple others layouts

15 views
Skip to first unread message

Thomas

unread,
Aug 28, 2018, 11:15:17 PM8/28/18
to CodenameOne Discussions
I have a container C1 with a tablelayout that is inside another container C0 using a borderlayout.(container C0 cover all the screen and C1 is its unique child, positionned at south). As long as I use it like this, this is ok, the container C1 has the same width as container C0 (= the width of the screen)
If I look at the component inspector in the simulator I have:
C0 (BorderLayout):
  Coordinates:     x: 0 y: 0 absX: 0 absY: 151 Width: 640 Height: 985
  Prefered Size:  360, 207
C1 (TableLayout):
  Constraint:        South
  Coordinates:     x: 0 y: 778 absX: 0 absY: 929 Width: 640 Height: 207
  Prefered Size:  360, 207

But if I add a new container C2, between C0 and C1  (So C2 is the unique child of C0 and C1 is the unique child of C2)  using a Flowlayout or Boxlayout.X, the width of C1 is no longer the one of the screen
Here is the dimensions returned in the component inspector:
C0 (BorderLayout):
  Coordinates:     x: 0 y: 0 absX: 0 absY: 151 Width: 640 Height: 985
  Prefered Size:  360, 207
C2 (BoxLayout.X_AXIS):
  Constraint:        South
  Coordinates:     x: 0 y: 778 absX: 0 absY: 929 Width: 640 Height: 207
  Prefered Size:  360, 207
C1 (TableLayout):
  Coordinates:     x: 0 y: 0 absX: 0 absY: 929 Width: 360 Height: 207
  Prefered Size:  360, 207

How can make C1 to have the same width as its parent container (C2) in the second case (in the end, I would like to add another component C1b before C1 and have C1 to take all the remaining width but it doesn't work as, even with C1 as unique child of C2, it doesn't take all the available parent (C2) width))

Shai Almog

unread,
Aug 29, 2018, 2:17:55 AM8/29/18
to CodenameOne Discussions
Border layout south gives the component the full width.

Box Layout X gives components their preferred size on the X axis. So does flow layout. I don't understand what you are trying to accomplish in terms of the UI. If you have a picture of the design you are trying to accomplish I can provide a recommendation. This is just a bit hard to visualize.

Thomas

unread,
Aug 29, 2018, 11:35:23 AM8/29/18
to CodenameOne Discussions
What I am trying to achieve is this:

layout_scheme.jpg


where C1b is a component that should have its prefered size and C1 should take the rest of the remaining width (I use the constraint width=-2 for the last column of the table so it extends to take all the parent width). The problem is that, for now, it do not work as with this hierarchy C1 do not take into account the parent actual width (it extends to its prefered width, not its actual width....))
So here is what I have for now:

layout_scheme_real.jpg

Shai Almog

unread,
Aug 30, 2018, 1:53:23 AM8/30/18
to CodenameOne Discussions
A simple solution would be to nest a border layout instead of box layout so c2 would be border layout and the table would be in the center of the second border layout.

Since border layout expands the center component to take up available space this would work well. You can then add the other components to east/west.

You can also use another table layout to enclose this table layout if you want fine grained control over the width of the elements.
Reply all
Reply to author
Forward
0 new messages