Adjusting Scrollbar Position Within a Grid Layout Container

[Walterhart]

I have a Container using a grid layout. Depending on the height a scroll bar appear in my container. Is there a way to move the scroll bar more to the right?

snippet:

# Rank Mapping from highest to lowest
RANKS = [
    "Celestial 1", "Celestial 2", "Celestial 3",
    "Grand Master 1", "Grand Master 2", "Grand Master 3",
    "Diamond 1", "Diamond 2", "Diamond 3",
    "Platinum 1", "Platinum 2", "Platinum 3",
    "Gold 1", "Gold 2", "Gold 3",
    "Silver 1", "Silver 2", "Silver 3",
    "Bronze 1", "Bronze 2", "Bronze 3"
]
RANK_MAP = {rank: i for i, rank in enumerate(reversed(RANKS))}

# Database setup
class RivalsSmurfTracker(App):
    
    CSS = """
    .container {
        layout: grid;
        grid-size: 3;
        grid-columns: 1fr 1fr 0.5fr;
        grid-rows: auto;
        grid-gutter:  1 1;
        padding: 1 3;
        content-align: center middle;
        width: 100%;
        overflow: auto;
    }
    .col-span-2{
        column-span: 2;
    }
    .col-span-3{
        column-span: 3;
    }
    .container > *{
        width:100%;
    }
    #edit_prompt,
    #edit_username,
    #edit_password,
    #edit_rank,
    #save_edit,
    #delete,
    .edit {
        display: none;
    }
    Button{ 
        height: auto;
        padding: 1 0;
        min-height: 3; 
        color: white;
        text-style:bold;
        min-width: 10;
    }
    Button:hover, 
    Button:focus {
        outline: wide #0178D4 !important;
    }
    #edit_buttons {
        height: auto; 
        min-height: 3; 
        padding-bottom: 1; 
    }
     #search_btn {
        background: darkblue;
        outline: wide darkblue;
    }
    #submit_btn, #save_edit{
        background: #004225;
        outline: wide #004225; 
    }
    #delete {
        background: maroon;
        outline: wide maroon;
    }
    .buttons{
        width:50%;
        height:auto;
    }
    .ml-2{
        margin-left:2
    }
    Input{
        border: wide white;
        padding: 1 0;
        height: auto;
        text-align: center;
        color: white;
    }
    Input:hover,  Select:hover > SelectCurrent, Select:focus > SelectCurrent , Input:focus{
        border: wide  #0178D4;
    }
     Select > SelectCurrent {
        border: wide white;
        padding: 1 0;
        width: 100%;
        height: auto;
     }
    .datatable {
        width: 100%;
        height: 50vh;
        min-height: 10vh; 
        overflow: auto;
    }
    #edit_user_prompt{
        padding: 2 0;
    }
   #create_user_prompt, #edit_user_prompt{
        width: 100%;
        max-height: 12vh;
        text-align: left;
    }
    """
    BINDINGS = [("ctrl+q", "quit", "CTRL+Q to Quit")]

    def compose(self) -> ComposeResult:

        yield Header()

        with Container(classes="container"):
            
            # Create user content
            yield Static("Fill in the details below to create a new user entry. Username, password, and rank are required fields. You can also search for existing users using the search box.", id="create_user_prompt", classes="col-span-3")

            username_input = Input(placeholder="Enter your username", id="username", classes="username-border")
            username_input.border_title = "Username"
            yield username_input
           
            user_password = Input(placeholder="Enter your password", id="password", password=True, classes="userpass")
            user_password.border_title ="Password"
            yield  user_password

            userrank_selection = Select([(rank, rank) for rank in RANKS], prompt="Select ", id="rank", classes="selection")
            userrank_selection.border_title="Rank"
            yield userrank_selection

            user_uid = Input(placeholder ="Enter your UID", id="uid", classes="useruid")
            user_uid.border_title="UID"
            yield  user_uid

            user_level = Input(placeholder="Enter your level", id="level", classes="userlevel")
            user_level.border_title = "Level"
            yield user_level

            yield Button("Submit", id="submit_btn", classes="submit ")
 
            search_input = Input(placeholder="Search by username or rank", id="search", classes="search col-span-2")
            search_input.border_title = "Search"
            yield search_input

            yield Button("Search", id="search_btn", classes="search ")
            
            # Search content
            yield Static("Click on the row you would like to edit or delete.", id="edit_user_prompt", classes="col-span-3")

            yield StretchyDataTable(id="results", cursor_type="row", classes="datatable col-span-3")

            edit_username = Input(placeholder="Edit Username", id="edit_username", classes="edit")
            edit_username.border_title = "Edit Username"
            yield edit_username

            edit_password = Input(placeholder="Edit Password", id="edit_password", password=True, classes="edit")
            edit_password.border_title = "Edit Password"
            yield edit_password

            edit_rank = Select([(rank, rank) for rank in RANKS], id="edit_rank", classes="editrank")
            edit_rank.border_title = "Edit Rank"
            yield edit_rank  

            edit_uid = Input(placeholder="Edit UID", id="edit_uid", classes="edit")
            edit_uid.border_title = "Edit UID"
            yield edit_uid

            edit_level = Input(placeholder="Edit Level", id="edit_level", classes="edit")
            edit_level.border_title = "Edit Level"
            yield edit_level

            yield Static() #Empty grid cell 

            yield Static()

            with Horizontal(classes="button--container"):
                yield Button("Save Changes", id="save_edit", classes="edit buttons")
                yield Button("Delete", id="delete", classes="edit buttons ml-2")

            yield Static()
        
        yield Footer()

[TomJGooding]

Unless that first line of text is also part of your grid, I suspect the scrollbar isn't for the container you might think it is. But it is difficult to say without any code...

[Walterhart]

There you go my bad. Forgot to paste snippet.

[TomJGooding]

Thanks, I stand corrected! Here's a more minimal example which demonstrates the problem:

from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.widgets import Static

TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""


class ExampleApp(App):
    CSS = """
    VerticalScroll {
        padding: 10;
        background: $surface;
        border: thick orange;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll():
            for _ in range(10):
                yield Static(TEXT)


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

Apparently Textual places the scrollbar inside the padding, which I'd honesty never noticed before! This seems unexpected to me but perhaps there's a good reason for it...

I wonder in your application, it might actually make sense to scroll the app/screen rather than the container? Try changing your container CSS from overflow: auto to height: auto instead.

[Walterhart]

Thanks! I added height: auto on container and now space is better! I am having this an issue since removed though. I can not scroll far enough to see my buttons under edit form. Suppose to be Save changes and delete.