From 20db62bc22ff6096b2baca3d95fe2a7ab6d50e78 Mon Sep 17 00:00:00 2001 From: Sunil Mohan Adapa Date: Sun, 17 Nov 2024 19:23:59 -0800 Subject: [PATCH] ui: snapshots: Fix horizontal form layout on mobiles for Bootstrap 5 Signed-off-by: Sunil Mohan Adapa Reviewed-by: Veiko Aasa --- static/themes/default/css/main.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index e459e279b..5ee54f274 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -157,6 +157,23 @@ h6:not(:first-child) { flex-wrap: wrap; } +/* In Bootstrap 5, instead of styling .col-* to 100% width by default, .row > * + is styled as .form-group has been removed. Needs updated + django-bootstrap-form */ +.form-horizontal > .form-group > * { + width: 100%; +} + +@media (min-width: 768px) { + .form-horizontal > .form-group > .col-md-4 { + width: 33.33333333%; + } + + .form-horizontal > .form-group > .col-md-8 { + width: 66.66666667%; + } +} + .radio .help-block { padding-left: 1.2rem; }