core icon indicating copy to clipboard operation
core copied to clipboard

Toolbar overflow menu icon does not always render

Open davecgh opened this issue 1 year ago • 1 comments

Describe the bug

The overflow menu icon for toolbars that overflow does not render for certain widths.

Also, perhaps I should make it a separate issue, but the overflow menu also doesn't show when the toolbar width is limited via a Styler.

How to reproduce

  1. Go to the documentation page for toolbars: https://www.cogentcore.org/core/widgets/containers/toolbars
  2. Switch to responsive design mode in the browser (ctrl+shift+m for Firefox or ctrl+shift+i for Chrome)
  3. Scroll to the example toolbar with 30 items that demonstrates the overflow menu
  4. Set the browser's responsive design screen size width to 1450
  5. Start increasing the pixel width 1 at a time by hitting the up arrow until you observe there are certain widths for which there is no overflow menu icon shown [^1]

[^1]: For me, on a 1440p display, this happens on Firefox at 1456 through 1463 and on Chrome at 1482 through 1487. It appears to happen when the width is just wide enough to show another button, but not also the overflow menu icon itself. The code probably needs to account with the width of both as well as the spacing when determining when to display the overflow menu.

Example code

tb := core.NewToolbar(b)
tb.Maker(func(p *tree.Plan) {
	for i := range 30 {
		tree.AddAt(p, strconv.Itoa(i), func(w *core.Button) {
			w.SetText("Button "+strconv.Itoa(i))
		})
	}
})

tb2 := core.NewToolbar(b)
tb2.Styler(func(s *styles.Style) {
	s.Max.X.Em(10)
})
tb2.Maker(func(p *tree.Plan) {
	for i := range 30 {
		tree.AddAt(p, strconv.Itoa(i), func(w *core.Button) {
			w.SetText("Button "+strconv.Itoa(i))
		})
	}
})

Relevant output

No response

Platform

Web

davecgh avatar Jul 30 '24 20:07 davecgh

Thank you for reporting this! We will work on fixing this now.

kkoreilly avatar Jul 30 '24 20:07 kkoreilly