# Layout How HTML pieces come together to form Dpgstack UI. ## Properties: Layout parts - **Base** — contains all JS scripts in head, default attributes for body, as well as optional notifications and sidebar: ```html {% load static tailwind_tags %} {% tailwind_css %} my site {{ slot }} ``` ### Card layout grid ```html
{% for piece in queryset %}{% endfor %}
``` # Full-height scrollable tables without pixel offsets How to make tables fill the remaining viewport height without using `h-screen`, `calc()`, or any other fixed pixel offsets. ## Workflow: Converting a table from fixed height to flex-column height 1. Identify the layout chain from `body` down to the scrollable table wrapper. 2. Confirm `body`/base has `overflow-hidden` — this is required for the chain to work. 3. Confirm the content area (`#main-content` or equivalent) has `h-svw` or `h-screen` — this anchors the chain. 4. Add `h-full` to any intermediate wrapper `
` that sits between the content area and the table. 5. On the outer table container (`#table-container`), set `class="flex flex-col h-full"`. 6. On the inner scrollable `
`, replace `h-screen` with `class="flex-1 min-h-0 overflow-y-scroll"`. 7. Remove any `h-[calc(...)]` or `h-screen` classes in the chain. ## Properties: Height propagation rules - `h-full` resolves to the parent's computed height. - `h-svw` resolves to exactly 100vh (dynamic viewport for mobile browsers). - `flex-1` distributes remaining space in a flex container. - `min-h-0` overrides the default `min-height: auto` on flex children, allowing them to shrink below their content height. **Required** on the scrollable wrapper — without it, the table can't shrink and overflows anyway. ## Definition: Table layout chain (shoppingitem example) ``` for_table.html body → overflow-hidden sidebar.html #main-content → h-svw (anchors the chain to viewport height) shoppingitem.html flex row → h-full (propagates height through padding) table_shopping.html #table-container → flex flex-col h-full scroll div → flex-1 min-h-0 overflow-y-scroll → table ``` Each layer inherits height from the parent. No pixel values, no overflow, no guessing. ## Workflow: Diagnosing a table that overflows bottom-of-screen 1. Open browser DevTools and inspect the scrollable `
`. 2. Check if its height is larger than the viewport minus the UI chrome (sidebar, header, padding). 3. If it uses `h-screen` or `h-[calc(100dvh-*)]`, note that those values are relative to the viewport, **not** the parent element. 4. `h-screen` does not account for parent padding, margins, or sibling elements. That's the overflow source. 5. Apply the conversion workflow above.