Skip to content

Commit 06f94d9

Browse files
authored
docs: expand layout sizing controls (#8682)
1 parent 63dd9d3 commit 06f94d9

1 file changed

Lines changed: 69 additions & 0 deletions

File tree

doc/how_to/layout/size.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,75 @@ pn.Column(
8080
), height=400, width=500, styles={'background': '#f0f0f0'})
8181
```
8282

83+
## Constrain Responsive Sizes
84+
85+
The `min_width`, `max_width`, `min_height`, and `max_height` parameters limit
86+
how far a responsive component can shrink or grow. A bound only affects an
87+
adjustable dimension, so pair `max_width` with a width-responsive sizing mode
88+
and `max_height` with a height-responsive sizing mode.
89+
90+
For example, the pane below fills the available width until it reaches 500
91+
pixels, and never shrinks below 200 pixels:
92+
93+
```{pyodide}
94+
pn.pane.Markdown(
95+
"Resize the browser to see the width change.",
96+
sizing_mode="stretch_width",
97+
min_width=200,
98+
max_width=500,
99+
styles={"background": "#f0f0f0", "padding": "1rem"},
100+
)
101+
```
102+
103+
The `width` and `height` parameters act as preferred sizes when the
104+
corresponding dimension is responsive. The minimum and maximum bounds still
105+
take precedence.
106+
107+
## Set a Default Sizing Mode
108+
109+
To avoid repeating the same `sizing_mode` on every component, set a default
110+
when loading Panel:
111+
112+
```python
113+
pn.extension(sizing_mode="stretch_width")
114+
```
115+
116+
The equivalent configuration setting is useful when Panel has already been
117+
loaded:
118+
119+
```python
120+
pn.config.sizing_mode = "stretch_width"
121+
```
122+
123+
These defaults apply to components created afterwards. A `sizing_mode`
124+
specified directly on a component takes precedence.
125+
126+
## Fine-grained Width and Height Policies
127+
128+
The `width_policy` and `height_policy` parameters provide lower-level control
129+
over each dimension. They take precedence over `sizing_mode` and accept the
130+
same policy choices for the horizontal and vertical axes:
131+
132+
| Policy | Behavior |
133+
| --- | --- |
134+
| `"auto"` | Use the component's preferred policy. |
135+
| `"fixed"` | Use exactly `width` or `height`; the component may overflow its container. |
136+
| `"fit"` | Prefer `width` or `height`, but fit within the available space and any minimum or maximum bounds. |
137+
| `"min"` | Use as little space as possible without crossing the minimum bound. |
138+
| `"max"` | Use as much space as possible without crossing the maximum bound. |
139+
140+
For example, `width_policy="max"` makes this row use the available horizontal
141+
space, while `max_width` prevents it from becoming wider than 600 pixels:
142+
143+
```{pyodide}
144+
pn.Row(
145+
pn.widgets.TextInput(name="Name", width_policy="max"),
146+
pn.widgets.Button(name="Submit"),
147+
width_policy="max",
148+
max_width=600,
149+
)
150+
```
151+
83152
---
84153

85154
## Related Resources

0 commit comments

Comments
 (0)