HTML/CSS/Blazor Fixed Buttons above and below list which needs to fill remaining space

Question

I have an app built in blazor for a shopping list. The UI is composed of the default blazor template tab, an Add Item button at the top and a Finished shopping button at the bottom. Between the 2 buttons I want the remaining space to be taken up by a list of custom components.

I do not know how to get the height of the list set to the remaining space on the page.

Closest I have gotten is by setting the size of the list container to 100vh - 140pixels where 140pixels is the size of the buttons.

As the nav tab appears on the top for narrow screens and the left for wide screens I can't just hardcode in the value for it.

I would also prefer if this didn't rely on me hardcoding this as well.

I have tried setting the container height to 100% but that is just giving it no limit.

The list is in a div with the overflow-auto class from bootstrap.

The code

   <body style="height:100%">
    <div style="">

        <div style="">
            <button class="btn btn-primary" style="margin-bottom: 10px; width:100%;" @onclick="AddItem">Add Item <span class="oi oi-plus" style="margin-left: 5px;" aria-hidden="true"></span> </button>

        </div>
        <div class="overflow-auto" style="height: calc(100vh - 140px);">
            @foreach (var item in _shoppingItems)
            {
                <ShoppingItemComponent Item="@item" DeleteItem="DeleteItem" BoughtToggle="UpdateItem" ></ShoppingItemComponent>
            }
        </div>
        <div style="">
            <button class="btn btn-primary" style="width:100%;" @onclick="ClearList">Shopping Done</button>
        </div>
    </div>
    </body>

You can see it running here, although note I am fiddling with it there so it may not match exactly with the styling in this question. https://smartshoppingapp.azurewebsites.net/

I have found some solutions around stack overflow around the problem, however I cannot get them working within my solution, I think all of the blazor boilerplate divs and bodies etc that wrap around my page are preventing the 100% height working as intended. ie index.html and mainlayout.razor

Answer 1

Use bootstrap flex:

I un-wired your buttons to get it to work locally.

<div class="vh-100 d-flex flex-column align-items-stretch">

    <button class="btn btn-primary">
        Add Item <span class="oi oi-plus" style="margin-left: 5px;" aria-hidden="true"></span>
    </button>

    <div class="flex-fill overflow-auto">
        @foreach (var item in _shoppingItems)
        {
            <ShoppingItemComponent Item="@item" 
                                   DeleteItem="DeleteItem" 
                                   BoughtToggle="UpdateItem" />
        }
    </div>

    <button class="btn btn-primary">
        Shopping Done
    </button>

</div>

As a side note: When I am debugging these sort of issues I assign background colours to the divs to see what is really happening. That and inpecting the HTML with the browser tools.

HTML/CSS/Blazor Fixed Buttons above and below list which needs to fill remaining space

Question

1 answers

solution1
0 ACCPTED 2022-03-12 08:23:57

HTML/CSS/Blazor Fixed Buttons above and below list which needs to fill remaining space

Question

1 answers

solution1 0 ACCPTED 2022-03-12 08:23:57

solution1
0 ACCPTED 2022-03-12 08:23:57