Tree with many nodes + Input + TabbedContent can lead to some nodes not being displayed

[armijnhemel]

I am currently bumping into an issue where not all the nodes of a Tree are displayed. My program has an Input field at the top, then TabbedContent, with two TabPanes each containing a Tree. When I add 100 nodes to the trees only the first 98 are displayed. When I remove the TabbedContent, or the Input, then all nodes are displayed. I have absolutely no idea what I am doing wrong here.

I have tested this on Textual 0.70, 0.72 and 0.74. A simple test application is attached, as well as three screenshots.

example_bug_tree_tabbed_input.zip

[github-actions]

We found the following entries in the FAQ which you may find helpful:

• How do I center a widget in a screen?
• Why doesn't Textual support ANSI themes?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[TomJGooding]

This simple method usually helps me debug layout issues:

TabbedContent {
  border: solid red;
}

This shows that the TabbedContent is overflowing its container. The default CSS for this widget has height: auto, so try changing this to 1fr in your CSS, or add a max-height.

[armijnhemel]

Thank you! This definitely works. I am not sure if this is an actual bug I will leave closing the issue to you.

[TomJGooding]

Maybe TabbedContent could have a max-height by default? I do remember other issues/discussions where people have been caught out by this, but I'm conscious any change to the default CSS might break other layouts!

Just to clarify, the problem is where your TabbedContent is inside a Container. The Container has a default height of 1fr (and doesn't scroll). so it does make sense why your TabbedContent overflowed according to the current CSS.

I'll leave the decision to the Textual maintainers.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.