widget added with mount is added at the bottom of the screen

[femin-kk]

I was trying to add widgets dynamically to an existing container. Widgets seems to be added at the bottom of screen each time. Basically each widget is taking a height of the screen from what i understood . This must be something trivial , but i couldnt figure out the issue. Can someone point out what is my mistake here. Thanks

import asyncio
from textual.app import App, ComposeResult
from textual.containers import  Vertical
from textual.widgets import Button
from textual.widget import Widget



class ItemsView(Widget):
    def __init__(self, num) -> None:
        super().__init__()
        self.num=num

    
    def compose(self) -> ComposeResult:
        items = [
            Button(label=str(name), id=f"item{str(name)}", classes="itemclass")
            for name in range(self.num)
        ]
        yield Vertical(*items,classes="item-container")
    

class MyApp(App[None]):
    CSS_PATH = "items.css"
    async def mount_modules(self):
        for item in range(5):
            self.query_one("#content").mount(ItemsView(item))
            
    def on_mount(self) -> None:
        asyncio.create_task(self.mount_modules())

    def compose(self) -> ComposeResult:
        yield Vertical( 
            id="content",
        )

MyApp().run()

[davep]

It's going to depend on how you size ItemsView. By default Widget has no specified height and so, I believe, it'll use up the whole of the container. Your ItemsView is inheriting from Widget. You don't show what's in your stylesheet but if you've not given a height for ItemsView you're seeing what I'd expect you to see.

As an example, if I take your code and add this to the styles:

ItemsView {
    height: 1fr;
}

Then each ItemsView added ends up taking up an equal share of the vertical space.

[femin-kk]

Thanks . If I use 1fr each widget will have same size? , Since each widgets have different number of buttons(.itemclass) in them ,individual button will be stretched or will have padding between them?
I wanted each .itemclass to have a fixed height
.itemclass{
height:5;
}
I was expecting .item-container and #content to have the height calculated by the number of widgets in them .Is that possible ?

[davep]

There's many options for doing that sort of thing; my advice would be to have another good read through the layout guide and select the containers that best work for what you're wanting to do.

[femin-kk]

Thanks. managed to fix it with grids. Not sure whether this is the right approach ,I had to dynamically change the row span based on number of items.