Move other input to be the label for the button

thanks @rschamp! Never would’ve thought label would accept html.
This commit is contained in:
Matthew Taylor 2016-12-05 14:05:27 -05:00
parent cc0496619d
commit afa25dc1c2
2 changed files with 25 additions and 24 deletions

View file

@ -360,24 +360,24 @@ module.exports = {
options={[ options={[
{value: 'female', label: formatMessage({id: 'general.female'})}, {value: 'female', label: formatMessage({id: 'general.female'})},
{value: 'male', label: formatMessage({id: 'general.male'})}, {value: 'male', label: formatMessage({id: 'general.male'})},
{value: 'other', label: ''} {value: 'other', label: <Input
className="demographics-step-input-other"
name="user.genderOther"
type="text"
validations={{
maxLength: 25
}}
validationErrors={{
maxLength: formatMessage({
id: 'registration.validationMaxLength'
})
}}
disabled={this.state.otherDisabled}
required={!this.state.otherDisabled}
help={null}
/>}
]} ]}
required /> required />
<div className="gender-input">
<Input name="user.genderOther"
type="text"
validations={{
maxLength: 25
}}
validationErrors={{
maxLength: formatMessage({
id: 'registration.validationMaxLength'
})
}}
disabled={this.state.otherDisabled}
required={!this.state.otherDisabled}
help={null} />
</div>
<Select label={formatMessage({id: 'general.country'})} <Select label={formatMessage({id: 'general.country'})}
name="user.country" name="user.country"
options={getCountryOptions(this.props.intl, DEFAULT_COUNTRY)} options={getCountryOptions(this.props.intl, DEFAULT_COUNTRY)}

View file

@ -13,7 +13,6 @@
border-radius: 8px; border-radius: 8px;
} }
.gender-input,
.other-input { .other-input {
float: right; float: right;
width: 90%; width: 90%;
@ -61,19 +60,21 @@
} }
&.demographics-step { &.demographics-step {
.gender-input {
margin-top: -5.5rem;
}
.radio { .radio {
width: 50%; margin: 1.5rem 1.5rem 0 0;
line-height: 3rem;
white-space: nowrap;
input { input {
margin-right: 1rem; margin-right: 1rem;
} }
} }
.demographics-step-input-other {
display: inline-block;
.col-sm-9 {
display: inline-block;
}
}
} }
&.phone-step { &.phone-step {