diff --git a/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx b/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
index 22b5c5230a2f571d65f3027c54da376226488691..ad86afac49ba7310ce054d84ab80c53faeb1fb7c 100644
--- a/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
+++ b/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
@@ -326,21 +326,23 @@ class DemographicsCollectionModal extends React.Component {
}}
/>
{/* Family Income */}
- <label htmlFor={FIELD_NAMES.INCOME}>
- {gettext("What was the total combined income, during the last 12 months, of all members of your family? ")}
- </label>
- <select
- onChange={this.handleSelectChange}
- className="form-control"
- name={FIELD_NAMES.INCOME} id={FIELD_NAMES.INCOME}
- value={wizardConsumer[FIELD_NAMES.INCOME]}
- disabled={this.state.fieldError}
- >
- <option value="default">{gettext("Select income")}</option>
- {
- this.loadOptions(FIELD_NAMES.INCOME)
- }
- </select>
+ <div className="d-flex flex-column pb-3">
+ <label htmlFor={FIELD_NAMES.INCOME}>
+ {gettext("What was the total combined income, during the last 12 months, of all members of your family? ")}
+ </label>
+ <select
+ onChange={this.handleSelectChange}
+ className="form-control"
+ name={FIELD_NAMES.INCOME} id={FIELD_NAMES.INCOME}
+ value={wizardConsumer[FIELD_NAMES.INCOME]}
+ disabled={this.state.fieldError}
+ >
+ <option value="default">{gettext("Select income")}</option>
+ {
+ this.loadOptions(FIELD_NAMES.INCOME)
+ }
+ </select>
+ </div>
</div>
}
</Wizard.Page>
@@ -348,22 +350,24 @@ class DemographicsCollectionModal extends React.Component {
{({ wizardConsumer }) =>
<div className="demographics-form-container" data-hj-suppress>
{/* Military History */}
- <label htmlFor={FIELD_NAMES.MILITARY}>
- {gettext("Have you ever served on active duty in the U.S. Armed Forces, Reserves, or National Guard?")}
- </label>
- <select
- className="form-control"
- onChange={this.handleSelectChange}
- name={FIELD_NAMES.MILITARY}
- id={FIELD_NAMES.MILITARY}
- value={wizardConsumer[FIELD_NAMES.MILITARY]}
- disabled={this.state.fieldError}
- >
- <option value="default">{gettext("Select military status")}</option>
- {
- this.loadOptions(FIELD_NAMES.MILITARY)
- }
- </select>
+ <div className="d-flex flex-column pb-3">
+ <label htmlFor={FIELD_NAMES.MILITARY}>
+ {gettext("Have you ever served on active duty in the U.S. Armed Forces, Reserves, or National Guard?")}
+ </label>
+ <select
+ className="form-control"
+ onChange={this.handleSelectChange}
+ name={FIELD_NAMES.MILITARY}
+ id={FIELD_NAMES.MILITARY}
+ value={wizardConsumer[FIELD_NAMES.MILITARY]}
+ disabled={this.state.fieldError}
+ >
+ <option value="default">{gettext("Select military status")}</option>
+ {
+ this.loadOptions(FIELD_NAMES.MILITARY)
+ }
+ </select>
+ </div>
</div>
}
</Wizard.Page>
@@ -371,39 +375,43 @@ class DemographicsCollectionModal extends React.Component {
{({ wizardConsumer }) =>
<div className="demographics-form-container" data-hj-suppress>
{/* Learner Education Level */}
- <label htmlFor={FIELD_NAMES.EDUCATION_LEVEL}>
- {gettext("What is the highest level of education that you have achieved so far?")}
- </label>
- <select
- className="form-control"
- onChange={this.handleSelectChange}
- name={FIELD_NAMES.EDUCATION_LEVEL}
- id={FIELD_NAMES.EDUCATION_LEVEL}
- value={wizardConsumer[FIELD_NAMES.EDUCATION_LEVEL]}
- disabled={this.state.fieldError}
- >
- <option value="default">{gettext("Select level of education")}</option>
- {
- this.loadOptions(FIELD_NAMES.EDUCATION_LEVEL)
- }
- </select>
+ <div className="d-flex flex-column pb-3">
+ <label htmlFor={FIELD_NAMES.EDUCATION_LEVEL}>
+ {gettext("What is the highest level of education that you have achieved so far?")}
+ </label>
+ <select
+ className="form-control"
+ onChange={this.handleSelectChange}
+ name={FIELD_NAMES.EDUCATION_LEVEL}
+ id={FIELD_NAMES.EDUCATION_LEVEL}
+ value={wizardConsumer[FIELD_NAMES.EDUCATION_LEVEL]}
+ disabled={this.state.fieldError}
+ >
+ <option value="default">{gettext("Select level of education")}</option>
+ {
+ this.loadOptions(FIELD_NAMES.EDUCATION_LEVEL)
+ }
+ </select>
+ </div>
{/* Parent/Guardian Education Level */}
- <label htmlFor={FIELD_NAMES.PARENT_EDUCATION}>
- {gettext("What is the highest level of education that any of your parents or guardians have achieved?")}
- </label>
- <select
- className="form-control"
- onChange={this.handleSelectChange}
- name={FIELD_NAMES.PARENT_EDUCATION}
- id={FIELD_NAMES.PARENT_EDUCATION}
- value={wizardConsumer[FIELD_NAMES.PARENT_EDUCATION]}
- disabled={this.state.fieldError}
- >
- <option value="default">{gettext("Select guardian education")}</option>
- {
- this.loadOptions(FIELD_NAMES.PARENT_EDUCATION)
- }
- </select>
+ <div className="d-flex flex-column pb-3">
+ <label htmlFor={FIELD_NAMES.PARENT_EDUCATION}>
+ {gettext("What is the highest level of education that any of your parents or guardians have achieved?")}
+ </label>
+ <select
+ className="form-control pb-3"
+ onChange={this.handleSelectChange}
+ name={FIELD_NAMES.PARENT_EDUCATION}
+ id={FIELD_NAMES.PARENT_EDUCATION}
+ value={wizardConsumer[FIELD_NAMES.PARENT_EDUCATION]}
+ disabled={this.state.fieldError}
+ >
+ <option value="default">{gettext("Select guardian education")}</option>
+ {
+ this.loadOptions(FIELD_NAMES.PARENT_EDUCATION)
+ }
+ </select>
+ </div>
</div>
}
</Wizard.Page>
@@ -431,39 +439,43 @@ class DemographicsCollectionModal extends React.Component {
disabled={this.state.fieldError}
/>
{/* Current Work Industry */}
- <label htmlFor={FIELD_NAMES.CURRENT_WORK}>
- {gettext("What industry do you currently work in?")}
- </label>
- <select
- className="form-control"
- onChange={this.handleSelectChange}
- name={FIELD_NAMES.CURRENT_WORK}
- id={FIELD_NAMES.CURRENT_WORK}
- value={wizardConsumer[FIELD_NAMES.CURRENT_WORK]}
- disabled={this.state.fieldError}
- >
- <option value="default">{gettext("Select current industry")}</option>
- {
- this.loadOptions(FIELD_NAMES.CURRENT_WORK)
- }
- </select>
+ <div className="d-flex flex-column pb-3">
+ <label htmlFor={FIELD_NAMES.CURRENT_WORK}>
+ {gettext("What industry do you currently work in?")}
+ </label>
+ <select
+ className="form-control pb-3"
+ onChange={this.handleSelectChange}
+ name={FIELD_NAMES.CURRENT_WORK}
+ id={FIELD_NAMES.CURRENT_WORK}
+ value={wizardConsumer[FIELD_NAMES.CURRENT_WORK]}
+ disabled={this.state.fieldError}
+ >
+ <option value="default">{gettext("Select current industry")}</option>
+ {
+ this.loadOptions(FIELD_NAMES.CURRENT_WORK)
+ }
+ </select>
+ </div>
{/* Future Work Industry */}
- <label htmlFor={FIELD_NAMES.FUTURE_WORK}>
- {gettext("What industry do you want to work in?")}
- </label>
- <select
- className="form-control"
- onChange={this.handleSelectChange}
- name={FIELD_NAMES.FUTURE_WORK}
- id={FIELD_NAMES.FUTURE_WORK}
- value={wizardConsumer[FIELD_NAMES.FUTURE_WORK]}
- disabled={this.state.fieldError}
- >
- <option value="default">{gettext("Select prospective industry")}</option>
- {
- this.loadOptions(FIELD_NAMES.FUTURE_WORK)
- }
- </select>
+ <div className="d-flex flex-column pb-3">
+ <label htmlFor={FIELD_NAMES.FUTURE_WORK}>
+ {gettext("What industry do you want to work in?")}
+ </label>
+ <select
+ className="form-control pb-3"
+ onChange={this.handleSelectChange}
+ name={FIELD_NAMES.FUTURE_WORK}
+ id={FIELD_NAMES.FUTURE_WORK}
+ value={wizardConsumer[FIELD_NAMES.FUTURE_WORK]}
+ disabled={this.state.fieldError}
+ >
+ <option value="default">{gettext("Select prospective industry")}</option>
+ {
+ this.loadOptions(FIELD_NAMES.FUTURE_WORK)
+ }
+ </select>
+ </div>
</div>
}
</Wizard.Page>
diff --git a/lms/static/js/demographics_collection/MultiselectDropdown.jsx b/lms/static/js/demographics_collection/MultiselectDropdown.jsx
index 9492f8444500a83479195c9d563f313c65d9c312..62cbbacba127526d5194447f937304e5330c00c3 100644
--- a/lms/static/js/demographics_collection/MultiselectDropdown.jsx
+++ b/lms/static/js/demographics_collection/MultiselectDropdown.jsx
@@ -109,7 +109,7 @@ class MultiselectDropdown extends React.Component {
<div key={index} id={`${option.value}-option-container`} className="option-container">
<label className="option-label">
<input id={`${option.value}-option-checkbox`} className="option-checkbox" type="checkbox" value={option.value} checked={checked} onChange={this.handleOptionClick} />
- {option.display_name}
+ <span className="pl-2">{option.display_name}</span>
</label>
</div>
)
@@ -126,7 +126,7 @@ class MultiselectDropdown extends React.Component {
render() {
return (
<div
- className="multiselect-dropdown"
+ className="multiselect-dropdown pb-3"
tabIndex={-1}
onBlur={e => {
// We need to make sure we only close and save the dropdown when
diff --git a/lms/static/js/demographics_collection/SelectWithInput.jsx b/lms/static/js/demographics_collection/SelectWithInput.jsx
index f5980da86cce5ee269494eef1c01b091187e50b8..fae40886536088660e27acbb43f03262001230fa 100644
--- a/lms/static/js/demographics_collection/SelectWithInput.jsx
+++ b/lms/static/js/demographics_collection/SelectWithInput.jsx
@@ -18,7 +18,7 @@ export const SelectWithInput = (props) => {
disabled,
} = props;
return (
- <div className="d-flex flex-column">
+ <div className="d-flex flex-column pb-3">
<label htmlFor={selectName}>{labelText}</label>
<select
className="form-control"
@@ -46,4 +46,4 @@ export const SelectWithInput = (props) => {
}
</div>
)
-}
\ No newline at end of file
+}