Skip to content

Conversation

python-and-novella
Copy link
Contributor

@python-and-novella python-and-novella commented Oct 13, 2025

Motivation

Fix #5270, where the style of ui.separator().props('vertical') doesn't work as expected in NiceGUI 3.0.0. above.

Implementation

change

.nicegui-separator {
  width: 100%;
}

into

.q-separator--vertical.nicegui-separator {
  width: 1px;
}
.q-separator--horizontal.nicegui-separator {
  width: 100%;
}

Progress

  • I chose a meaningful title that completes the sentence: "If applied, this PR will..."
  • The implementation is complete.
  • Pytests have been added (or are not necessary).
  • Documentation has been added (or is not necessary).

Test

Testing it by:

from nicegui import ui

def index():
    with ui.column():
        ui.button('1')
        ui.separator()
        ui.button('2')
    with ui.row():
        ui.button('1')
        ui.separator().props('vertical')
        ui.button('2')

ui.run(
    root=index
)

It should work as following:
image

@python-and-novella
Copy link
Contributor Author

python-and-novella commented Oct 13, 2025

I'm sorry for that I have no time to write unit test. And I have no idea of writing unit test about this.
There isn't a unit test about ui.separator, I think the unit test is necessary.

@evnchn
Copy link
Collaborator

evnchn commented Oct 13, 2025

I don't think that's how the tests are supposed to work. (You're more like checking whether the styles which we applied are applied, which they sure are, from the tests which tests that part)

Maybe you can test the aspect ratio of the rendered divider, instead.

@python-and-novella
Copy link
Contributor Author

It is difficult for me without learning carefully. I will try it when I am free.
I am glad for that if someone can make unit test complete.

@evnchn
Copy link
Collaborator

evnchn commented Oct 13, 2025

Honestly I am not that good at pytest either, but looking back I think we can get away with it.

I didn't have any tests in #5266 either.

@falkoschindler
Copy link
Contributor

Thanks for the pull request, @python-and-novella!
I haven't had the chance to think about it, yet. But either way, I don't think pytests are necessary. We don't check the visual appearance for most elements, so we don't need to start here. If we would start checking aspect ratios, I would also need to check color, shadow, exact dimensions etc. to prevent regressions. This isn't feasible.

@falkoschindler falkoschindler self-requested a review October 13, 2025 21:28
@falkoschindler falkoschindler added this to the 3.1 milestone Oct 13, 2025
@falkoschindler falkoschindler added review Status: PR is open and needs review bug Type/scope: A problem that needs fixing labels Oct 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Type/scope: A problem that needs fixing review Status: PR is open and needs review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ui.separator().props("vertical") takes width: 100% instead of 1px with new nicegui.css

3 participants