DataTable does not respect CSS alignment

[ofek]

from textual.app import App
from textual.containers import Horizontal, Vertical
from textual.widgets import DataTable, Footer, Header, Label, Switch

class Listing(DataTable):
    def on_mount(self):
        super().on_mount()

        self.add_columns('foo', 'bar')
        self.add_row('a', 'b')

class MyApp(App):
    DEFAULT_CSS = """
    Vertical {
        width: 100%;
    }

    Horizontal {
        width: 100%;
        align: center middle;
    }
    """

    def compose(self):
        yield Header()
        yield Vertical(
            Horizontal(Switch()),
            Horizontal(Label(''.join(map(str, range(10))))),
            Horizontal(Listing()),
        )
        yield Footer()

if __name__ == '__main__':
    app = MyApp()
    app.run()

[davep]

The DataTable is actually in the center/middle of the Vertical it's inside of and is following what you specified in CSS. If you're ever unsure about what's going on, a good chec is to place a border around the control in question. So, if you place a border around the DataTable in your example, you'll see:

In other words: it's the full width and height of the Vertical it's inside of. If you want it to visually appear more balanced you could do things like go with a border, specify a more appropriate width for it, perhaps set its background colour to raise it from the app's background, that sort of thing. For example, with this added to the CSS of your example:

    DataTable {
        background: $boost;
        border: round #444;
        width: 50%;
    }

you get this:

Of course the other thing you can do is get a bit more creative with the column widths too; and at some point in the near future we hope to allow for some degree of relative column width sizing.

[willmcgugan]

This is a great tip. I usually do border: solid red

You could also set the width of the table to "auto" if you want the table to precisely line up in the center.