Vertical scrollbars when putting a Vertical layout into Collapsible instead of the widget directly

[kostrykin]

Consider this MWE:

from textual.app import App
from textual.widgets import Collapsible, Label
from textual.containers import Vertical

class CollapsibleApp(App):

    def compose(self):
        with Collapsible(collapsed=False, title="Leto"):
            with Vertical():
                yield Label('line of text\n' * 20)

if __name__ == "__main__":
    app = CollapsibleApp()
    app.run()

The problem with it is that we don't get vertical scrollbars:

We would get vertical scrollbars when putting the Label directly into the Collapsible. But how to make it work with the Vertical layout in between?

---

Why would one want to use a Vertical layout in between, you might ask? Because when mounting widgets directly into the Collapsible dynamically,

class CollapsibleApp(App):

    BINDINGS = [
        ('x', 'add_widget', 'Add widget')
    ]

    def compose(self):
        with Collapsible(collapsed=False, title="Leto", id='collapsible'):
            yield Label('line of text')

    def action_add_widget(self):
        self.query_one('#collapsible').mount(Label('line of text 2'))

they get mounted after the Collapsible instead, for some reason, instead of inside:

[willmcgugan]

You can swap your Vertical for a VerticalScroll.

As for your original issue, the Collapsible has children of its own for the title and contents. If you want to add something to the contents, I think the following should work:

self.query_one('#collapsible > Contents').mount(Label('line of text 2'))

[TomJGooding]

Thanks Will, I've deleted my original reply. Just to note regarding the VerticalScroll, it really depends on whether you want the entire screen to scroll or just the container itself.

[kostrykin]

Much thanks, another solution I have found meanwhile, will leave it here for the record:

    def compose(self):
        with Collapsible(collapsed=False, title="Leto"):
            vert = Vertical()            # <---
            vert.styles.height = 'auto'  # <---
            with vert:                   # <---
                yield Label('line of text\n' * 20)