diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/const.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/const.js index 42f2d18fb956..186168c11b2d 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/const.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/const.js @@ -39,6 +39,8 @@ hqDefine("cloudcare/js/form_entry/const", function () { TEXT_ALIGN_CENTER: 'text-align-center', TEXT_ALIGN_RIGHT: 'text-align-right', BUTTON_SELECT: 'button-select', + SHORT: 'short', + MEDIUM: 'medium', // Note it's important to differentiate these two NO_PENDING_ANSWER: undefined, @@ -52,6 +54,8 @@ hqDefine("cloudcare/js/form_entry/const", function () { BLOCK_SUBMIT: 'block-submit', BLOCK_ALL: 'block-all', FULL_WIDTH: 'col-sm-12', + SHORT_WIDTH: 'col-sm-2', + MEDIUM_WIDTH: 'col-sm-4', // XForm Navigation QUESTIONS_FOR_INDEX: 'questions_for_index', 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 index aca19bfa4593..a8219a0d4507 100644 --- a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js +++ b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js @@ -860,6 +860,7 @@ hqDefine("cloudcare/js/form_entry/form_ui", function () { }; Question.prototype.setWidths = function () { + const self = this; const columnWidth = Question.calculateColumnWidthForPerRowStyle(this.style); const perRowPattern = new RegExp(`\\d+${constants.PER_ROW}(\\s|$)`); @@ -872,6 +873,12 @@ hqDefine("cloudcare/js/form_entry/form_ui", function () { this.labelWidth = constants.LABEL_WIDTH; this.questionTileWidth = constants.FULL_WIDTH; } + + if (self.stylesContains(constants.SHORT)) { + self.controlWidth = constants.SHORT_WIDTH; + } else if (self.stylesContains(constants.MEDIUM)) { + self.controlWidth = constants.MEDIUM_WIDTH; + } }; /**