Horizontal Line Rendering Issues with widget.NewSeparator() and canvas.Line

[Bhagyarsh]

Checklist

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

Describe the bug

I am encountering consistent issues rendering horizontal lines in Fyne. Neither widget.NewSeparator() nor canvas.Line produces a proper horizontal line in my application. The lines either render vertically or fail to appear altogether, depending on the layout used.

How to reproduce

1. Use the following minimal code snippet to reproduce the issue:

      package main
      
      import (
          "fyne.io/fyne/v2"
          "fyne.io/fyne/v2/app"
          "fyne.io/fyne/v2/canvas"
          "fyne.io/fyne/v2/container"
          "fyne.io/fyne/v2/widget"
      )
      
      func main() {
          myApp := app.New()
          myWindow := myApp.NewWindow("Line Rendering Issue")
      
          // Label with separators
          label := widget.NewLabel("or sign in with")
      
          // Attempt with widget.NewSeparator
          leftSeparator := widget.NewSeparator()
          rightSeparator := widget.NewSeparator()
      
          // Alternative with canvas.Line
          leftLine := canvas.NewLine(fyne.NewColor(128, 128, 128))
          leftLine.StrokeWidth = 2
          rightLine := canvas.NewLine(fyne.NewColor(128, 128, 128))
          rightLine.StrokeWidth = 2
      
          // Combine label and lines
          content := container.NewVBox(
              widget.NewLabel("Above the line"),
              container.NewHBox(
                  leftSeparator, // Or replace with leftLine
                  label,
                  rightSeparator, // Or replace with rightLine
              ),
              widget.NewLabel("Below the line"),
          )
      
          myWindow.SetContent(content)
          myWindow.Resize(fyne.NewSize(400, 200))
          myWindow.ShowAndRun()
      }
   

2. Run the code.

3. Observe the following:

• The widget.NewSeparator() renders as a vertical line or is invisible.
  

• The canvas.Line does not render correctly in the layout.
  

Screenshots

No response

Example code

          
          import (
              "fyne.io/fyne/v2"
              "fyne.io/fyne/v2/app"
              "fyne.io/fyne/v2/canvas"
              "fyne.io/fyne/v2/container"
              "fyne.io/fyne/v2/widget"
          )
          
          func main() {
              myApp := app.New()
              myWindow := myApp.NewWindow("Line Rendering Issue")
          
              // Label with separators
              label := widget.NewLabel("or sign in with")
          
              // Attempt with widget.NewSeparator
              leftSeparator := widget.NewSeparator()
              rightSeparator := widget.NewSeparator()
          
              // Alternative with canvas.Line
              leftLine := canvas.NewLine(fyne.NewColor(128, 128, 128))
              leftLine.StrokeWidth = 2
              rightLine := canvas.NewLine(fyne.NewColor(128, 128, 128))
              rightLine.StrokeWidth = 2
          
              // Combine label and lines
              content := container.NewVBox(
                  widget.NewLabel("Above the line"),
                  container.NewHBox(
                      leftSeparator, // Or replace with leftLine
                      label,
                      rightSeparator, // Or replace with rightLine
                  ),
                  widget.NewLabel("Below the line"),
              )
          
              myWindow.SetContent(content)
              myWindow.Resize(fyne.NewSize(400, 200))
              myWindow.ShowAndRun()
          } ```

### Fyne version

v2.5.1

### Go compiler version

v1.23.4

### Operating system and version

Window 11 and 6.6.65-1-MANJARO

### Additional Information

Workarounds Attempted:
1. Custom Rectangles:
    - Tried canvas.Rectangle with explicit sizes and orientations. The rectangle either renders incorrectly or fails to appear.
2. Explicit Layouts:
     - Used VBox, HBox, and Border layouts to enforce constraints. None of these resolved the issue.
3. Forced Orientation:
    - Used canvas.Line with StrokeWidth and explicit sizing. The line did not appear as a proper horizontal line.

[andydotxyz]

Lines slope diagonally from top left to bottom right if not managed specifically for line placement.

Putting a line into a container is unlikely to do exactly what you want, that is what the separator does.

What issues did you have when you placed the separator into a container? In an HBox they will display vertically as they are separating items in a horizontal row of content...

[Bhagyarsh]

Thank you for your response!

I understand that widget.NewSeparator adapts its orientation based on the parent layout. I tried the following configurations:

1. Used container.NewHBox for horizontal layout.
2. Wrapped the widget.NewSeparator in container.NewVBox to force vertical alignment.

but, the separator is not visible.

Do you recommend a more straightforward way to achieve this behavior?

Thank you again for your guidance!

[andydotxyz]

I don't understand what you are trying to do. A separator inside a VBox inside an HBox will have minimum width and height, I.e. probably only a pixel in size.

I don't understand how a separator in a horizontal arrangement of widgets would have a "vertical alignment"... what does that even mean?

[Bhagyarsh]

To provide more context, I’ve attached a visual example of what I’m aiming for:

Is there a way to expand the Separator within an HBox or VBox?
What’s the recommended approach to achieve a horizontal divider in this layout if not?
I hope this clarifies my question. Thank you again for your guidance!

[andydotxyz]

It looks like that is a separator with a label on top - a Stack container allows you to put one thing over another

[Bhagyarsh]

It might not be the most optimal solution, but I found a hacky way to achieve this layout.

func lineWithText() *fyne.Container {
	leftLine := canvas.NewLine(color.RGBA{128, 128, 128, 255})

	leftLine.StrokeWidth = 1

	rightLine := canvas.NewLine(color.RGBA{128, 128, 128, 255})
	rightLine.StrokeWidth = 1                              

	// Create the "or sign in with" label
	label := widget.NewLabel("or sign in with")

	// Combine the lines and label into a horizontal layout
	lineWithText := container.NewGridWithColumns(3,
		common.PaddedContainer(widget.NewSeparator(), fyne.NewSize(0, 14)),
		label,
		common.PaddedContainer(widget.NewSeparator(), fyne.NewSize(0, 14)),
	)
	return lineWithText
}
func PaddedContainer(content fyne.CanvasObject, padding fyne.Size) *fyne.Container {
	topPadding := canvas.NewRectangle(nil)
	topPadding.SetMinSize(fyne.NewSize(0, padding.Height))

	bottomPadding := canvas.NewRectangle(nil)
	bottomPadding.SetMinSize(fyne.NewSize(0, padding.Height))

	leftPadding := canvas.NewRectangle(nil)
	leftPadding.SetMinSize(fyne.NewSize(padding.Width, 0))

	rightPadding := canvas.NewRectangle(nil)
	rightPadding.SetMinSize(fyne.NewSize(padding.Width, 0))

	return container.NewBorder(topPadding, bottomPadding, leftPadding, rightPadding, content)
}