vbox + AppTabs causing theming issues

GiveMePseudonyms commented 5 days ago

Checklist

[X] I have searched the issue tracker for open issues that relate to the same problem, before opening a new one.
[X] This issue only relates to a single bug. I will open new issues for any other problems.

Describe the bug

When using AppTabs inside a vbox, the system-theme is ignored and the app defaults to the light theme.

This occurs on both Linux (Pop!_OS 22.04 LTS) 64-bit GNOME 42.9 X11 windowing

and MacOS Sonoma 14.5, intel

I have not tested this on any other platform.

How to reproduce

Create vbox
create AppTabs
vbox.Add(AppTabs)
window.SetContent(vbox)

Screenshots

This is how the app should look

This is how the issue looks when setting w.content to the vbox and putting the AppTabs into the vbox:

Example code

package main

import (
    "image/color"

    "fyne.io/fyne/v2"
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/canvas"
    "fyne.io/fyne/v2/container"
    "fyne.io/fyne/v2/layout"
    "fyne.io/fyne/v2/widget"
)

func main() {
    a := app.New()
    w := a.NewWindow("bug report")
    w.SetFixedSize(true)
    w.Resize(fyne.NewSize(500, 500))

    titleText := canvas.NewText("title text", color.White)
    titleText.TextSize = 30

    vbox := container.NewVBox()
    vbox.Add(titleText)

    divider := canvas.NewLine(color.White)
    divider.StrokeWidth = 1000
    vbox.Add(divider)

    tab1contents := container.New(layout.NewFormLayout())

    lbl1 := canvas.NewText("label 1", color.White)
    entry1 := widget.NewEntry()
    entry1.SetPlaceHolder("Enter a number...")
    tab1contents.Add(lbl1)
    tab1contents.Add(entry1)

    tab1 := container.NewTabItem("tab1", tab1contents)

    tab2contents := container.New(layout.NewFormLayout())

    lbl2 := canvas.NewText("label 1", color.White)
    entry2 := widget.NewEntry()
    entry2.SetPlaceHolder("Enter a number...")
    tab2contents.Add(lbl2)
    tab2contents.Add(entry2)

    tab2 := container.NewTabItem("tab2", tab2contents)

    tabs := container.NewAppTabs(tab1, tab2)

    tabs.SetTabLocation(container.TabLocationTop)

    //vbox causes theme issues, open an issue on GH for this
    //comment out the line below and set w.content to tabs to fix the issue
    vbox.Add(tabs)

    //set this to vbox to cause theme issue
    //when content is set to tabs, this issue does not occur
    w.SetContent(vbox)

    w.ShowAndRun()

}

Fyne version

v2 / v2.5.2

Go compiler version

1.23.3 linux/amd64, 1.23.3 darwin/amd64

Operating system and version

Pop!_OS 22.04 LTS, MacOS Sonoma 14.5

Additional Information

No response

andydotxyz commented 4 days ago

Running through this reproduction steps and I see that VBox is not the cause of the problem...

See this code where we reset the content of it:

    tabs.SetTabLocation(container.TabLocationTop)
    vbox = container.NewVBox()

    //vbox causes theme issues, open an issue on GH for this
    //comment out the line below and set w.content to tabs to fix the issue
    vbox.Add(tabs)

    //set this to vbox to cause theme issue
    //when content is set to tabs, this issue does not occur
    w.SetContent(vbox)

That renders correctly. Digging in more.

andydotxyz commented 4 days ago

OMG that should have been easier to find. The problem is that you are drawing a MASSIVE white line, which is essentially a white rectangle that is taller than the whole app. By adding that to your VBox it is making the items also in the box unreadable. So remove the mad 1000 stroke width:

    divider.StrokeWidth = 1

fyne-io / fyne