diff --git a/README.md b/README.md index 2b7d47e..6fd8af1 100644 --- a/README.md +++ b/README.md @@ -9,3 +9,51 @@ This app is built using Appsmith. Turn any datasource into an internal app in mi ##### You can visit the application using the below link ###### [![](https://assets.appsmith.com/git-sync/Buttons.svg) ](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3) [![](https://assets.appsmith.com/git-sync/Buttons2.svg)](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3/edit) + +--- + +## Widget Positioning & Spacing + +Appsmith uses a **grid-based layout system** for widget positioning. + +### Grid Basics + +| Property | Description | Default | +|----------|-------------|---------| +| `topRow` | Starting row position (0-based) | - | +| `bottomRow` | Ending row position | - | +| `leftColumn` | Starting column (0-based) | - | +| `rightColumn` | Ending column | - | +| `parentRowSpace` | Pixels per row | 10px | +| `parentColumnSpace` | Pixels per column | ~25px | + +The canvas is **64 columns wide**. Each row is **10 pixels tall**. + +### Calculating Size + +``` +Height = (bottomRow - topRow) × 10px +Width = (rightColumn - leftColumn) × 25px +``` + +### Visual Example + +``` +Row 0 ┌────────────────────────────────────────┐ + │ Navigation (topRow: 0) │ +Row 7 └────────────────────────────────────────┘ ← bottomRow: 7 +Row 8 ┌────────────────────────────────────────┐ ← topRow: 8 (1 row gap = 10px) + │ Content Widget │ +Row 16 └────────────────────────────────────────┘ +``` + +### This Project's Standard + +| Widget | topRow | bottomRow | Notes | +|--------|--------|-----------|-------| +| Navigation | 0 | 7 | 70px tall | +| First Content | 8 | 16 | 10px gap below nav | + +### Dynamic Height + +Widgets with `"dynamicHeight": "AUTO_HEIGHT"` adjust height based on content. The `bottomRow` serves as an initial guide, and `originalTopRow`/`originalBottomRow` store the original placement values.