From 1cc63b69ca472ae02418ea3ba71b75582184fb79 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Tue, 19 Jul 2022 15:30:34 -0600
Subject: [PATCH] Add CSS classes 'label-on-left' & 'label-inline' to put
 widget label in column on the left Use 'label-inline' with 'label-on-left' to
 remove the white-space for an inline label

---
 api/templates/default/etemplate2.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 54a9e34840..15eee4dc0d 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -76,6 +76,28 @@
     display: none;
 }
 
+/* Put widget label to the left of the widget, with fixed width */
+.label-on-left::part(form-control) {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+}
+
+.label-on-left::part(form-control-label) {
+    flex: 0 0 auto;
+    width: var(--width, 8em);
+    white-space: normal;
+}
+
+.label-on-left::part(form-control-input) {
+    flex: 1 1 auto;
+}
+
+/* Use .label-inline with .label-on-left to remove fixed label space */
+.label-inline::part(form-control-label) {
+    width: initial;
+}
+
 /**
  * VBox widget
  */