Horizontal line

[shakamoushie]

I want to put a horizontal line as a separator between page elements. Why does either of the following statements not work?

1. ui.html("< hr>")
2. ui.html("< hr/>")

Thanks in advance

PS: a space has been intentionally put after <to prevent the line from showing here

[falkoschindler]

The problem with horizontal lines is usually that they collapse to a width of 0 px. It's the same for our built-in ui.separator. Both are not visible:

ui.html('<hr />')
ui.separator()

But setting their width to, e.g., 100 % works:

ui.html('<hr />').classes('w-full')
ui.separator().classes('w-full')

Maybe we should set the default width of a ui.separator to 100 % to make it more intuitive. Usually we try to keep initial classes and styles to a minimum in order to avoid confusion and interference with classes and styles set by the user. But a class w-full shouldn't be problematic.

[falkoschindler]

In a8baf11 I changed the default width of a ui.separator to 100%. So now it should be visible without any customization.

[shakamoushie]

Thank you @falkoschindler,

I used ui.separator().classes('w-full h-1').style('background-color: #DFD3C3') to get a thicker coloured line.

However, ui.separator() does not show a line despite upgrading to the latest NiceGui version.

Nevertheless, I can still work with classes and style as mentioned above.

Cheers

[falkoschindler]

Yes, my fix from two days ago hasn't been released yet. It will be part of upcoming version 1.1.4.