Merge pull request #33827 from dimagi/jls/empty-question-labels

Removed question labels altogether when they have no content
dimagi · Dec 19, 2023 · 02de25b · 02de25b
2 parents 81481ab + fe0bcd5
commit 02de25b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
@@ -737,7 +737,6 @@ hqDefine("cloudcare/js/form_entry/form_ui", function () {
             self.domain_meta = parseMeta(json.datatype, json.style);
         }
         self.throttle = 200;
-        self.setWidths();
         // If the question has ever been answered, set this to true.
         self.hasAnswered = false;
 
@@ -755,6 +754,17 @@ hqDefine("cloudcare/js/form_entry/form_ui", function () {
             return (self.error() || self.serverError()) && !self.dirty();
         });
 
+        self.hasLabelContent = ko.computed(function () {
+            return (
+                ko.utils.unwrapObservable(self.caption)
+                || ko.utils.unwrapObservable(self.caption_markdown)
+                || ko.utils.unwrapObservable(self.help)
+                || ko.utils.unwrapObservable(self.hint)
+                || ko.utils.unwrapObservable(self.required)
+            );
+        });
+        self.setWidths(self.hasLabelContent());
+
         self.form = function () {
             var parent = self.parent;
             while (parent.type && parent.type() !== null) {
@@ -868,19 +878,22 @@ hqDefine("cloudcare/js/form_entry/form_ui", function () {
         return this.stylesContaining(pattern).length > 0;
     };
 
-    Question.prototype.setWidths = function () {
+    Question.prototype.setWidths = function (hasLabel) {
         const self = this;
-        const columnWidth = Question.calculateColumnWidthForPerRowStyle(this.style);
+        const columnWidth = Question.calculateColumnWidthForPerRowStyle(self.style);
         const perRowPattern = new RegExp(`\\d+${constants.PER_ROW}(\\s|$)`);
 
-        if (this.stylesContains(perRowPattern)) {
-            this.controlWidth = constants.FULL_WIDTH;
-            this.labelWidth = constants.FULL_WIDTH;
-            this.questionTileWidth = `col-sm-${columnWidth}`;
+        if (self.stylesContains(perRowPattern)) {
+            self.controlWidth = constants.FULL_WIDTH;
+            self.labelWidth = constants.FULL_WIDTH;
+            self.questionTileWidth = `col-sm-${columnWidth}`;
         } else {
-            this.controlWidth = constants.CONTROL_WIDTH;
-            this.labelWidth = constants.LABEL_WIDTH;
-            this.questionTileWidth = constants.FULL_WIDTH;
+            self.controlWidth = constants.CONTROL_WIDTH;
+            self.labelWidth = constants.LABEL_WIDTH;
+            self.questionTileWidth = constants.FULL_WIDTH;
+            if (!hasLabel) {
+                self.controlWidth += ' ' + constants.LABEL_OFFSET;
+            }
         }
 
         if (self.stylesContains(constants.SHORT)) {

diff --git a/corehq/apps/cloudcare/templates/form_entry/templates.html b/corehq/apps/cloudcare/templates/form_entry/templates.html
@@ -213,7 +213,7 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
                 on: $root.forceRequiredVisible,
             }
         ">
-    <label class="caption control-label" data-bind="css: labelWidth, attr: {'for': entry.entryId}">
+    <label class="caption control-label" data-bind="css: labelWidth, attr: {'for': entry.entryId}, visible: hasLabelContent">
       {# appearance attributes TEXT_ALIGN_CENTER TEXT_ALIGN_RIGHT #}
       <div data-bind="css: {
           'row': help(),