Edit Widget size

[pom11]

How do you split a Container/Static size in half upon adding a widget inside? Similar with what tmux/iterm/vim does with panes.

How do you resize Widget size at key pressed?

def compose(self) -> ComposeResult:
	yield Footer()
	yield Container(Container(Plot(),id="plot1"), id="plots")

def action_add_signals(self) -> None:
	newPlot = Container(Plot(),id="plot2"))
	self.query_one("#plots").mount(newPlot)
	#split in half 
	self.query_one(Container).size[1] = self.query_one((Container)).size[1]/2

[davep]

I may be misunderstanding what you're trying to do, but I think if I was to approach a "add pane and split parent" effect I'd start out with this:

from textual.app import App, ComposeResult
from textual.widgets import Header, Footer
from textual.containers import Horizontal, Vertical

class Splitter( App[ None ] ):

    CSS = """
    Horizontal {
        border: solid #666;
    }

    Vertical {
        border: solid #888;
        width: 1fr;
    }
    """

    BINDINGS = [
        ( "n", "new_pane", "New Pane" )
    ]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Horizontal( id="main" )
        yield Footer()

    def action_new_pane( self ) -> None:
        self.query_one( "#main", Horizontal ).mount( Vertical() )

if __name__ == "__main__":
    Splitter().run()

[pom11]

Thx for answering. Your example is a good starting point.

I m trying to replicate the functionality of iterm/tmux/vi or any other windows manager (i3) when adding/removing panes and resizing them with key bindings.

What if:

def action_new_pane( self ) -> None:
        self.query_one( "#main", Horizontal ).mount( Vertical(id="v1") )
        self.query_one( "#main", Horizontal ).mount( Vertical(id="v2") )

and i want to rescale v1 to width:2fr?

[davep]

I'm not 100% sure about the best way to go about this, but I think this is where I'd start experimenting:

from textual.app import App, ComposeResult
from textual.widgets import Header, Footer
from textual.containers import Horizontal, Vertical
from textual.css.scalar import Scalar

class Splitter( App[ None ] ):

    CSS = """
    Horizontal {
        border: solid #666;
    }

    Vertical {
        border: solid #888;
        width: 1fr;
    }
    """

    BINDINGS = [
        ( "n", "new_pane", "New Pane" ),
        ( "w", "widen_first", "Widen First Pane" )
    ]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Horizontal( id="main" )
        yield Footer()

    def action_new_pane( self ) -> None:
        self.query_one( "#main", Horizontal ).mount( Vertical() )

    def action_widen_first( self ) -> None:
        if len( panes := self.query( "#main Vertical" ) ) > 1:
            panes.first().styles.width = Scalar.parse( "2fr" )

if __name__ == "__main__":
    Splitter().run()

[pom11]

this is what i am trying to accomplish, plus adding and removing panes.

Would much appreciate a tutorial for this in the official docs.