@@ -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