Fix gr.Group, container=False

.config/playwright.config.js

@@ -5,5 +5,5 @@ export default {
 	},
 	testMatch: /.*.spec.ts/,
 	testDir: "..",
-	globalSetup: "./playwright-setup.js",
+	globalSetup: "./playwright-setup.js"
 };

CHANGELOG.md

@@ -10,6 +10,7 @@
 * The `.change()` event is fixed in `Audio` so that fires when the component value is programmatically updated by [@abidlabs](https://github.com/abidlabs) in [PR 4793](https://github.com/gradio-app/gradio/pull/4793)
 - Fixed bug where `gr.Video` could not preprocess urls by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4904](https://github.com/gradio-app/gradio/pull/4904)
 - Fixed copy button rendering in API page on Safari by [@aliabid94](https://github.com/aliabid94) in [PR 4924](https://github.com/gradio-app/gradio/pull/4924)
+- Fixed `gr.Group` and `container=False`. `container` parameter only available for `Textbox`, `Number`, and `Dropdown`, the only elements where it makes sense. By [@aliabid94](https://github.com/aliabid94) in [PR 4916](https://github.com/gradio-app/gradio/pull/4916)
 - Fixed broken image link in auto-generated `app.py` from `ThemeClass.push_to_hub` by [@deepkyu](https://github.com/deepkyu) in [PR 4944](https://github.com/gradio-app/gradio/pull/4944)
 
 ## Other Changes:

demo/blocks_group/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_group"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.\")\n", "    gr.Textbox(\"A\")\n", "    gr.Number(3)\n", "    gr.Button()\n", "    gr.Image()\n", "    gr.Slider()\n", "\n", "    gr.Markdown(\"### This is the same set put in a gr.Group.\")\n", "    with gr.Group():\n", "        gr.Textbox(\"A\")\n", "        gr.Number(3)\n", "        gr.Button()\n", "        gr.Image()\n", "        gr.Slider()\n", "\n", "    gr.Markdown(\"### Now in a Row, no group.\")\n", "    with gr.Row():\n", "        gr.Textbox(\"A\")\n", "        gr.Number(3)\n", "        gr.Button()\n", "        gr.Image()\n", "        gr.Slider()\n", "\n", "    gr.Markdown(\"### Now in a Row in a group.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Textbox(\"A\")\n", "            gr.Number(3)\n", "            gr.Button()\n", "            gr.Image()\n", "            gr.Slider()\n", "\n", "    gr.Markdown(\"### Several rows grouped together.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Textbox(\"A\")\n", "            gr.Number(3)\n", "            gr.Button()\n", "        with gr.Row():\n", "            gr.Image()\n", "            gr.Audio()\n", "\n", "    gr.Markdown(\"### Several columns grouped together. If columns are uneven, there is a gray group background.\")\n", "    with gr.Group():\n", "        with gr.Row():\n", "            with gr.Column():\n", "                name = gr.Textbox(label=\"Name\")\n", "                btn = gr.Button(\"Hello\")\n", "                gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", "                gr.Number()\n", "                gr.Textbox()\n", "            with gr.Column():\n", "                gr.Image()\n", "                gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", "                with gr.Row():\n", "                    gr.Number(scale=2)\n", "                    gr.Textbox()\n", "\n", "    gr.Markdown(\"### container=False removes label, padding, and block border, placing elements 'directly' on background.\")\n", "    gr.Radio([1,2,3], container=False)\n", "    gr.Textbox(container=False)\n", "    gr.Image(\"https://picsum.photos/id/237/200/300\", container=False, height=200)\n", "\n", "    gr.Markdown(\"### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.\")\n", "\n", "\n", "    with gr.Group():\n", "        name = gr.Textbox(label=\"Name\")\n", "        output = gr.Textbox(show_label=False, container=False)\n", "        greet_btn = gr.Button(\"Greet\")\n", "        with gr.Row():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False)\n", "            gr.Textbox(container=False)\n", "            gr.Number(container=False)\n", "            gr.Image(height=100)\n", "    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", "\n", "\n", "    gr.Markdown(\"### More examples\")\n", "\n", "    with gr.Group():\n", "        gr.Chatbot()\n", "        with gr.Row():\n", "            name = gr.Textbox(label=\"Prompot\", container=False)\n", "            go = gr.Button(\"go\", scale=0)\n", "\n", "    with gr.Column():\n", "        gr.Radio([1,2,3], container=False)\n", "        gr.Slider(0, 20, container=False)\n", "\n", "    with gr.Group():\n", "        with gr.Row():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", "            gr.Number(container=False)\n", "            gr.Textbox(container=False)\n", "\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", "        with gr.Column():\n", "           gr.Number(container=False)\n", "        with gr.Column():\n", "            gr.Textbox(container=False)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/blocks_group/run.py

@@ -0,0 +1,113 @@
+import gradio as gr
+
+def greet(name):
+    return "Hello " + name + "!"
+
+with gr.Blocks() as demo:
+    gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
+    gr.Textbox("A")
+    gr.Number(3)
+    gr.Button()
+    gr.Image()
+    gr.Slider()
+
+    gr.Markdown("### This is the same set put in a gr.Group.")
+    with gr.Group():
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+    gr.Markdown("### Now in a Row, no group.")
+    with gr.Row():
+        gr.Textbox("A")
+        gr.Number(3)
+        gr.Button()
+        gr.Image()
+        gr.Slider()
+
+    gr.Markdown("### Now in a Row in a group.")
+    with gr.Group():
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+            gr.Image()
+            gr.Slider()
+
+    gr.Markdown("### Several rows grouped together.")
+    with gr.Group():
+        with gr.Row():
+            gr.Textbox("A")
+            gr.Number(3)
+            gr.Button()
+        with gr.Row():
+            gr.Image()
+            gr.Audio()
+
+    gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
+    with gr.Group():
+        with gr.Row():
+            with gr.Column():
+                name = gr.Textbox(label="Name")
+                btn = gr.Button("Hello")
+                gr.Dropdown(["a", "b", "c"], interactive=True)
+                gr.Number()
+                gr.Textbox()
+            with gr.Column():
+                gr.Image()
+                gr.Dropdown(["a", "b", "c"], interactive=True)
+                with gr.Row():
+                    gr.Number(scale=2)
+                    gr.Textbox()
+
+    gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
+    gr.Radio([1,2,3], container=False)
+    gr.Textbox(container=False)
+    gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
+
+    gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
+
+
+    with gr.Group():
+        name = gr.Textbox(label="Name")
+        output = gr.Textbox(show_label=False, container=False)
+        greet_btn = gr.Button("Greet")
+        with gr.Row():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
+            gr.Textbox(container=False)
+            gr.Number(container=False)
+            gr.Image(height=100)
+    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+
+    gr.Markdown("### More examples")
+
+    with gr.Group():
+        gr.Chatbot()
+        with gr.Row():
+            name = gr.Textbox(label="Prompot", container=False)
+            go = gr.Button("go", scale=0)
+
+    with gr.Column():
+        gr.Radio([1,2,3], container=False)
+        gr.Slider(0, 20, container=False)
+
+    with gr.Group():
+        with gr.Row():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+            gr.Number(container=False)
+            gr.Textbox(container=False)
+
+    with gr.Row():
+        with gr.Column():
+            gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
+        with gr.Column():
+           gr.Number(container=False)
+        with gr.Column():
+            gr.Textbox(container=False)
+
+
+if __name__ == "__main__":
+    demo.launch()