starred/tview

Fork 0

mirror of https://github.com/rivo/tview.git synced 2026-04-26 21:35:54 +03:00

[GH-ISSUE #658] The flexbox directions are reversed #481

New issue

Closed

opened 2026-03-04 01:05:22 +03:00 by kerem · 5 comments

kerem commented

2026-03-04 01:05:22 +03:00

Owner

Originally created by @franeklubi on GitHub (Sep 29, 2021).
Original GitHub issue: https://github.com/rivo/tview/issues/658

Repr code:

package main

import (
	"github.com/rivo/tview"
)

func main() {
	app := tview.NewApplication()

	flex := tview.NewFlex().SetDirection(tview.FlexRow)

	flex.AddItem(
		tview.NewBox().
			SetBorder(true).
			SetTitle("Left"),
		0,
		1,
		false,
	)

	flex.AddItem(
		tview.NewBox().
			SetBorder(true).
			SetTitle("Right"),
		0,
		1,
		false,
	)

	if err := app.SetRoot(flex, true).SetFocus(flex).Run(); err != nil {
		panic(err)
	}
}

Expected behaviour:

The Left and Right boxes to be on the left and right side of the terminal.

Actual behaviour:

The Left and Right boxes are placed on the up and bottom sides of the terminal.

My expectations are guided by experience, but here's the MDN reference for flexbox axes:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#the_main_axis

Is this the expected behavior of tview flexbox axes? If so, why? This doesn't make much sense to me.

Originally created by @franeklubi on GitHub (Sep 29, 2021). Original GitHub issue: https://github.com/rivo/tview/issues/658 # Repr code: ```go package main import ( "github.com/rivo/tview" ) func main() { app := tview.NewApplication() flex := tview.NewFlex().SetDirection(tview.FlexRow) flex.AddItem( tview.NewBox(). SetBorder(true). SetTitle("Left"), 0, 1, false, ) flex.AddItem( tview.NewBox(). SetBorder(true). SetTitle("Right"), 0, 1, false, ) if err := app.SetRoot(flex, true).SetFocus(flex).Run(); err != nil { panic(err) } } ``` # Expected behaviour: The `Left` and `Right` boxes to be on the left and right side of the terminal. # Actual behaviour: ![image](https://user-images.githubusercontent.com/33394849/135349595-3b683420-8279-47d4-a825-64f17a3afc7d.png) The `Left` and `Right` boxes are placed on the up and bottom sides of the terminal. My expectations are guided by experience, but here's the MDN reference for flexbox axes: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#the_main_axis Is this the expected behavior of tview flexbox axes? If so, why? This doesn't make much sense to me.

kerem closed this issue

2026-03-04 01:05:22 +03:00

kerem commented

2026-03-04 01:05:23 +03:00

Author

Owner

@ghost commented on GitHub (Sep 30, 2021):

By default, Flex adds item column-wise. You have explicitly set the direction to row-wise using Flex.SetDirection(). Here's the same code without .SetDirection(tview.FlexRow):

@ghost commented on GitHub (Sep 30, 2021): By default, Flex adds item column-wise. You have explicitly set the direction to row-wise using `Flex.SetDirection()`. Here's the same code without `.SetDirection(tview.FlexRow)`: ![Screenshot_20210930_110311](https://user-images.githubusercontent.com/91283627/135403587-05b18bd5-4faa-4300-95c8-17e3e38056e1.png)

kerem commented

2026-03-04 01:05:23 +03:00

Author

Owner

@franeklubi commented on GitHub (Sep 30, 2021):

@ka1r03 Yes, I know, but that still doesn't mean the confusion is resolved.

Since I need a couple of flexboxes in various directions, when I set them I expect different output.

@franeklubi commented on GitHub (Sep 30, 2021): @ka1r03 Yes, I know, but that still doesn't mean the confusion is resolved. Since I need a couple of flexboxes in various directions, when I set them I expect different output.

kerem commented

2026-03-04 01:05:23 +03:00

Author

Owner

@rivo commented on GitHub (Sep 30, 2021):

You might be right. The semantics in tview are different from CSS. To be honest, the CSS one always confused me and I guess this was also the case right at the time tview was implemented. My intuitive understanding is that a "row" direction means "one item per row". But in CSS, it's not, so I always have to look it up. (Seriously, I always need to look up the proper flex-direction value because it's so confusing to me.)

Unfortunately, it's too late to change it now. So, in tview, "row" means "one item per row" and "column" means "one item per column".

@rivo commented on GitHub (Sep 30, 2021): You might be right. The semantics in `tview` are different from CSS. To be honest, the CSS one always confused me and I guess this was also the case right at the time `tview` was implemented. My intuitive understanding is that a "row" direction means "one item per _row_". But in CSS, it's not, so I always have to look it up. (Seriously, I _always_ need to look up the proper `flex-direction` value because it's so confusing to me.) Unfortunately, it's too late to change it now. So, in `tview`, "row" means "one item per row" and "column" means "one item per column".

kerem commented

2026-03-04 01:05:24 +03:00

Author

Owner

@franeklubi commented on GitHub (Sep 30, 2021):

Unfortunately, it's too late to change it now.

That's what I thought :/

One little suggestion that would help clear this issue up is to update the docs and/or add new consts alongside FlexRow and FlexColumn that represent CSS flexbox directions. Although the second one may bring even more confusion, so updating the docs may be sufficient.

Anyway, thank you for the explanation!

@franeklubi commented on GitHub (Sep 30, 2021): > Unfortunately, it's too late to change it now. That's what I thought :/ One little suggestion that would help clear this issue up is to **update the docs** and/or **add new consts alongside FlexRow and FlexColumn that represent CSS flexbox directions**. Although the second one may bring even more confusion, so updating the docs may be sufficient. Anyway, thank you for the explanation!

kerem commented

2026-03-04 01:05:24 +03:00

Author

Owner

@rivo commented on GitHub (Oct 29, 2021):

I did that with the latest commit. Cheers.

@rivo commented on GitHub (Oct 29, 2021): I did that with the latest commit. Cheers.