Skip to content

Width

The width rule sets a widget's width. By default, it sets the width of the content area, but if box-sizing is set to border-box it sets the width of the border area.

Syntax

width: <SCALAR>;

Example

This example adds a widget with 50% width of the screen.

from textual.app import App
from textual.widget import Widget


class WidthApp(App):
    def compose(self):
        yield Widget()


app = WidthApp(css_path="width.css")
Screen > Widget {     
    background: green;
    width: 50%;
    color: white;
}

WidthApp Widget

CSS

/* Explicit cell width */
width: 10;

/* Percentage width */
width: 50%;

/* Automatic width */
width: auto

Python

self.styles.width = 10
self.styles.width = "50%
self.styles.width = "auto"