CSS Issue: Bottom Button Container Not Fully Visible

[Walterhart]

I'm almost done with a side project for a group of friends(actually this the last part), but I'm facing a CSS issue. The problem is that the button--container at the bottom of the screen isn't fully visible—only the top part is showing. Even after adding extra padding to the container, it still only displays half of it. What am I doing wrong?

Extra padding:

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%;
        height: 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;
    }
   #create_user_prompt, #edit_user_prompt{
        width: 100%;
        max-height: 12vh;
        text-align: left;
        padding: 0;
    }
    .button--container{
        width: 100%;
        height: 100%;
        min-height: 3;
        padding: 1 0;
        content-align: center middle;
        border: dashed white;
    }
    """
    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", id="save_edit", classes="edit buttons")
                yield Button("Delete", id="delete", classes="edit buttons ml-2")

            yield Static()
        
        yield Footer()

[TomJGooding]

Have you tried reducing the number of widgets to debug this?

For example, let's start with removing everything before the last block of inputs. This seems to work as expected.

Now try adding back the DataTable inside the container. This looks like this breaks! What happens if you put the table outside the container?

It looks like you want to show/hide the last block of inputs. Wouldn't it make more sense to have this in a separate container? This should also help make your app layout simpler to reason about - only put the widgets you need in a grid layout in these containers.

[willmcgugan]

It will always be helpful if your code is runnable without modifications. i.e. please don't ask folk to fix the code before running it.

If you want to ensure your content fits the container, you should set height to "auto". If you set it to 100%, then it will be 100% of it's container, which may be too small.