Fixed alignment of checkbox questions with lengthy labels (QA-6739)

dimagi · Jun 26, 2024 · 44359d3 · 44359d3
1 parent 4bcfa60
commit 44359d3
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/entries.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/entries.js
@@ -47,6 +47,7 @@ hqDefine("cloudcare/js/form_entry/entries", [
         self.xformParams = function () { return {}; };
         self.placeholderText = '';
         self.broadcastTopics = [];
+        self.colStyleIfHideLabel = ko.observable(null);
         // Returns true if the rawAnswer is valid, false otherwise
         self.isValid = function (rawAnswer) {
             return self.getErrorMessage(rawAnswer) === null;

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/entry_select.html b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/entry_select.html
@@ -4,8 +4,8 @@
   <fieldset>
   <legend class="sr-only" data-bind="text: question.caption()"></legend>
     <div class="sel clear">
-      <div data-bind="foreach: choices, as: 'choice', css: {row: $data.colStyleIfHideLabel}">
-        <div data-bind="css: { checkbox: $parent.isMulti, radio: !$parent.isMulti, 'form-check': !$parent.colStyleIfHideLabel}, class: $parent.colStyleIfHideLabel">
+      <div data-bind="foreach: choices, as: 'choice', css: {row: $data.colStyleIfHideLabel()}">
+        <div data-bind="css: {'form-check': !$parent.colStyleIfHideLabel()}, class: $parent.colStyleIfHideLabel()">
           <input data-bind="
                       checked: $parent.rawAnswer,
                       checkedValue: $data,