60 lines
3.0 KiB
Markdown
60 lines
3.0 KiB
Markdown
|
||
|
||
This app is built using Appsmith. Turn any datasource into an internal app in minutes. Appsmith lets you drag-and-drop components to build dashboards, write logic with JavaScript objects and connect to any API, database or GraphQL source.
|
||
|
||
|
||
|
||
### [Github](https://github.com/appsmithorg/appsmith) • [Docs](https://docs.appsmith.com/?utm_source=github&utm_medium=social&utm_content=appsmith_docs&utm_campaign=null&utm_term=appsmith_docs) • [Community](https://community.appsmith.com/) • [Tutorials](https://github.com/appsmithorg/appsmith/tree/update/readme#tutorials) • [Youtube](https://www.youtube.com/appsmith) • [Discord](https://discord.gg/rBTTVJp)
|
||
|
||
##### You can visit the application using the below link
|
||
|
||
###### [ ](https://appsmith.mpeapp.com/applications/6947cc068872ae1d129983a0/pages/6947cc068872ae1d129983a3) [](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.
|