From c04d6679122f5d328f076a5a1dc4cebc98bddebf Mon Sep 17 00:00:00 2001 From: "Chrysanthe (chgo)" Date: Thu, 2 Nov 2023 13:39:48 +0100 Subject: [PATCH] [FIX] web: allow radio fields to wrap horizontally This commit adds the possibility for the `.o_horizontal` class to wrap, which is especially interesting in mobile. When using a `radio` widget, you can choose to use two options : - `horizontal` which will add a `.o_horizontal` class to the radios and allow them to display with a `flex-row` - `vertical` which will add a `.o_vertical` class to the radios and allow them to display with a `flex-column` Prior to this commit, the `.o_horizontal` class was not allowing elements to wrap, which would cause overflow issues on small devices. To fix this issue, we add a `flex-wrap` property to the class, to ensure that if the buttons are larger than the breakpoint, they will wrap and stay inside the container. task-3580082 closes odoo/odoo#140651 Signed-off-by: Pierre Paridans (app) --- addons/web/static/src/views/fields/radio/radio_field.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/addons/web/static/src/views/fields/radio/radio_field.scss b/addons/web/static/src/views/fields/radio/radio_field.scss index 3317c606b89..85645298009 100644 --- a/addons/web/static/src/views/fields/radio/radio_field.scss +++ b/addons/web/static/src/views/fields/radio/radio_field.scss @@ -15,6 +15,8 @@ .o_horizontal { display: inline-flex; + flex-wrap: wrap; + .o_radio_item { margin-right: $o-form-spacing-unit * 2; } @@ -26,4 +28,4 @@ margin-bottom: $o-form-spacing-unit; } } -} \ No newline at end of file +}