[GH-ISSUE #918] Flex - NewFlex().SetDirection(). I am Confused. Is there any logical explanation? #669

New issue

Closed

opened 2026-03-04 01:06:54 +03:00 by kerem · 1 comment

kerem commented

2026-03-04 01:06:54 +03:00

Owner

Originally created by @WhipMeHarder on GitHub (Nov 18, 2023).
Original GitHub issue: https://github.com/rivo/tview/issues/918

Hello Any/All,
In Rivo's tview Flex control example of a possible arrangement of Flex controls in a terminal, as seen in the link here: -

https://github.com/rivo/tview/wiki/Flex

We see the following code:

app := tview.NewApplication()
flex := tview.NewFlex().
AddItem(tview.NewBox().SetBorder(true).SetTitle("Left (1/2 x width of Top)"), 0, 1, false). AddItem(tview.NewFlex().SetDirection(tview.FlexRow). AddItem(tview.NewBox().SetBorder(true).SetTitle("Top"), 0, 1, false). AddItem(tview.NewBox().SetBorder(true).SetTitle("Middle (3 x height of Top)"), 0, 3, false). AddItem(tview.NewBox().SetBorder(true).SetTitle("Bottom (5 rows)"), 5, 1, false), 0, 2, false). AddItem(tview.NewBox().SetBorder(true).SetTitle("Right (20 cols)"), 20, 1, false)
if err := app.SetRoot(flex, true).SetFocus(flex).Run(); err != nil {
panic(err)
}

When the code is executed, we see as shown in the example image that there are 2 Flex columns on either side of 3 Flex rows. However, what is of interest is the last line for the Flex control, as shown here:

AddItem(tview.NewBox().SetBorder(true).SetTitle("Right (20 cols)"), 20, 1, false)

For some strange reason, that last line, changes the behaviour of the flex control, so that it forms a column, even though the code is no different to the previous three lines of code.

I would have expected that to create a new Flex column in the terminal, the code would have to be adjusted like this:

AddItem(tview.NewFlex().SetDirection(tview.FlexColumn).
AddItem(tview.NewBox().SetBorder(true).SetTitle("Right (20 cols)"), 20, 1, false)

So, the question is, why does the last line above form a new column, when there is no clear instruction for it to do so?

Could it be that the Flex which is supposed to create the last row, cannot be formed, due to screen boundaries in the terminal window, so it automatically collects itself into a column?

When the code is run, it will not work until the "adjusted" code of the last two lines is changed like this: -

AddItem(tview.NewFlex().SetDirection(tview.FlexColumn), 0 , 1, false).
AddItem(tview.NewBox().SetBorder(true).SetTitle("Right (20 cols)"), 20, 1, false)

However, the output is not as expected, as there is an empty gap placed between the rows and the last column.

Is there an answer?

WhipMeHarder

Originally created by @WhipMeHarder on GitHub (Nov 18, 2023). Original GitHub issue: https://github.com/rivo/tview/issues/918 Hello Any/All, In Rivo's tview Flex control example of a possible arrangement of Flex controls in a terminal, as seen in the link here: - [https://github.com/rivo/tview/wiki/Flex](url) We see the following code: `app := tview.NewApplication()` `flex := tview.NewFlex().` `AddItem(tview.NewBox().SetBorder(true).SetTitle("Left (1/2 x width of Top)"), 0, 1, false). AddItem(tview.NewFlex().SetDirection(tview.FlexRow). AddItem(tview.NewBox().SetBorder(true).SetTitle("Top"), 0, 1, false). AddItem(tview.NewBox().SetBorder(true).SetTitle("Middle (3 x height of Top)"), 0, 3, false). AddItem(tview.NewBox().SetBorder(true).SetTitle("Bottom (5 rows)"), 5, 1, false), 0, 2, false). AddItem(tview.NewBox().SetBorder(true).SetTitle("Right (20 cols)"), 20, 1, false)` `if err := app.SetRoot(flex, true).SetFocus(flex).Run(); err != nil {` `panic(err)` `}` When the code is executed, we see as shown in the example image that there are 2 Flex columns on either side of 3 Flex rows. However, what is of interest is the last line for the Flex control, as shown here: `AddItem(tview.NewBox().SetBorder(true).SetTitle("Right (20 cols)"), 20, 1, false)` For some strange reason, that last line, changes the behaviour of the flex control, so that it forms a column, even though the code is no different to the previous three lines of code. I would have expected that to create a new Flex column in the terminal, the code would have to be adjusted like this: **`AddItem(tview.NewFlex().SetDirection(tview.FlexColumn).`** `AddItem(tview.NewBox().SetBorder(true).SetTitle("Right (20 cols)"), 20, 1, false)` So, the question is, why does the last line above form a new column, when there is no clear instruction for it to do so? Could it be that the Flex which is supposed to create the last row, cannot be formed, due to screen boundaries in the terminal window, so it automatically collects itself into a column? When the code is run, it will not work until the "adjusted" code of the last two lines is changed like this: - **`AddItem(tview.NewFlex().SetDirection(tview.FlexColumn), 0 , 1, false).`** `AddItem(tview.NewBox().SetBorder(true).SetTitle("Right (20 cols)"), 20, 1, false)` However, the output is not as expected, as there is an empty gap placed between the rows and the last column. Is there an answer? ? WhipMeHarder

kerem closed this issue

2026-03-04 01:06:55 +03:00

kerem commented

2026-03-04 01:06:56 +03:00

Author

Owner

@WhipMeHarder commented on GitHub (Nov 18, 2023):

...Yes! I have found the answer. On the third line is the following code:

AddItem(tview.NewBox().SetBorder(true).SetTitle("Bottom (5 rows)"), 5, 1, false), 0, 2, false).`

It is the last segment of the code which ends the FlexColumn directive:

0, 2, false).

@WhipMeHarder commented on GitHub (Nov 18, 2023): ...Yes! I have found the answer. On the third line is the following code: `AddItem(tview.NewBox().SetBorder(true).SetTitle("Bottom` (5 rows)"), 5, 1, false), 0, 2, false).` It is the last segment of the code which ends the FlexColumn directive: **0, 2, false).**

kerem referenced this issue

2026-03-04 01:09:00 +03:00

[PR #669] [MERGED] Fix typo "SetPlaceholderStyle" in comment for GetPlaceholderStyle #1010