Document fast full screen mode

examples/reference/templates/FastGridTemplate.ipynb

@@ -151,6 +151,44 @@
     "Built-in templates don't render necessarily well in a notebook as their styling can badly interact with the notebook built-in styling. You can disable rendering the output of a cell using `;`, as done above. For development purposes, the app can be quickly rendered in another tab by replacing `.servable()` with `.show()`. Alternatively, the [JupyterLab Preview](../../how_to/notebook/jupyterlabpreview.md) can be used to display objects marked with `.servable()` in a new JupyterLab tab, circumventing any potential styling issue.\n",
     ":::"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Tips & Tricks\n",
+    "\n",
+    "### Make components stretch in full screen mode\n",
+    "\n",
+    "The FastGrid template is organized into *cards*. Each card provides a *full screen* button in the top, right corner. Below we will describe how to configure for *full screen mode*.\n",
+    "\n",
+    "In order for a Panel component to maximize in full screen mode its\n",
+    "\n",
+    "- `sizing_mode` should be set to `\"stretch_both\"`\n",
+    "- `height`, `width`, `max_height` and `max_width` should not be set.\n",
+    "\n",
+    "**Example**\n",
+    "\n",
+    "```python\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension(sizing_mode=\"stretch_width\")\n",
+    "\n",
+    "layout1 = pn.Column(styles={\"background\": \"green\"}, sizing_mode=\"stretch_both\")\n",
+    "layout2 = pn.Column(styles={\"background\": \"red\"}, sizing_mode=\"stretch_both\")\n",
+    "layout3 = pn.Column(styles={\"background\": \"blue\"}, sizing_mode=\"stretch_both\")\n",
+    "\n",
+    "template = pn.template.FastGridTemplate(site=\"Panel\", title=\"App\", prevent_collision=True)\n",
+    "template.main[0:2,0:6]=layout1\n",
+    "template.main[0:2,6:12]=layout2\n",
+    "template.main[2:3,0:12]=layout3\n",
+    "template.servable()\n",
+    "```\n",
+    "\n",
+    "<img src=\"../../assets/FastGridTemplateFullScreen.png\" style=\"margin-left: auto; margin-right: auto; display: block;max-height:600px\"></img>"
+   ]
   }
  ],
  "metadata": {

examples/reference/templates/FastListTemplate.ipynb

@@ -144,6 +144,48 @@
     "Built-in templates don't render necessarily well in a notebook as their styling can badly interact with the notebook built-in styling. You can disable rendering the output of a cell using `;`, as done above. For development purposes, the app can be quickly rendered in another tab by replacing `.servable()` with `.show()`. Alternatively, the [JupyterLab Preview](../../how_to/notebook/jupyterlabpreview.md) can be used to display objects marked with `.servable()` in a new JupyterLab tab, circumventing any potential styling issue.\n",
     ":::"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Tips & Tricks\n",
+    "\n",
+    "### Restrict the height of cards in the main area and keep full screen mode working\n",
+    "\n",
+    "The FastListTemplate is organized horizontally into *cards*. Each card provides a *full screen* button in the top, right corner. Below we will describe how to configure for *full screen mode*.\n",
+    "\n",
+    "In order for a Panel component to maximize in full screen mode its\n",
+    "\n",
+    "- `sizing_mode` should be set to `\"stretch_both\"`\n",
+    "- `height`, `width`, `max_height` and `max_width` should not be set.\n",
+    "\n",
+    "This will force the *card* to also *stretch_both* in non full screen mode. To set a specific max-height in non full screen mode, you can use `raw_css` on the template.\n",
+    "\n",
+    "**Example**\n",
+    "\n",
+    "```python\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension(sizing_mode=\"stretch_width\")\n",
+    "\n",
+    "CSS = \"\"\"\n",
+    "div.card-margin:nth-child(1) {\n",
+    "    max-height: 300px;\n",
+    "}\n",
+    "div.card-margin:nth-child(2) {\n",
+    "    max-height: 400px;\n",
+    "}\n",
+    "\"\"\"\n",
+    "\n",
+    "layout1 = pn.Column(styles={\"background\": \"green\"}, sizing_mode=\"stretch_both\")\n",
+    "layout2 = pn.Column(styles={\"background\": \"red\"}, sizing_mode=\"stretch_both\")\n",
+    "\n",
+    "pn.template.FastListTemplate(site=\"Panel\", title=\"App\", main=[layout1, layout2], raw_css=[CSS]).servable()\n",
+    "```\n",
+    "\n",
+    "<img src=\"../../assets/FastListTemplateFullScreen.png\" style=\"margin-left: auto; margin-right: auto; display: block;max-height:600px\"></img>"
+   ]
   }
  ],
  "metadata": {