Responsive Design

[ksckaan1]

Hi,

I want to design responsive but i dont know how to make it in cogent. I occured with a scenerio like bellow.

I show the content of a frame in 4 columns, but this value can be 3 or 5 depending on the size of the window. How can I adjust this?

colsNum := 4
grids := core.NewFrame(fr)
grids.Styler(func(s *styles.Style) {
	s.Max.X = units.Dp(1000)
	s.Min.X = units.Dp(400)
	s.Grow.X = 1
	s.Display = styles.Grid
	s.Columns = colsNum // this line
	s.Gap.Set(units.Dp(10))
})

or what is the idiomatic way to do this?

Thanks!

[kkoreilly]

Does something like this work for you?

grids.Styler(func(s *styles.Style) {
	s.Max.X = units.Dp(1000)
	s.Min.X = units.Dp(400)
	s.Grow.X = 1
	s.Display = styles.Grid
	if grids.SizeClass() == core.SizeExpanded {
		s.Columns = 5
	} else {
		s.Columns = 3
	}
	s.Gap.Set(units.Dp(10))
})

[ksckaan1]

Thanks, it's solved my problem. But i just wonder, is there any way for do this with pixel way like lower or bigger than specific pixel?

[kkoreilly]

That is a good idea; I will add a function that returns the scene size directly for you to use.

[kkoreilly]

@ksckaan1 With the latest version of the main branch as of #1259, you can do specific size checking using the SceneSize() function instead of SizeClass() if you want.

[ksckaan1]

Cool ty