I am struggling to position a checkbox to the right of the "answer input one" field. I've tried adjusting the display property without success. You can see the current layout here.
Below is the code for rendering the answer input:
<div>
<TextField
hintText="An informative question title..."
fullWidth
floatingLabelText="Question Title"
value={questionTitle}
onChange={(e) => this.props.questionTitleChanged(e.target.value)}
/>
<TextField
floatingLabelText="Answer Input 1"
onChange={(e) => this.props.questionInputChanged({
inputIndex: 0,
value: e.target.value,
correct: false
})}
value={questionInputs[0].value}
style={styles.answerField}
/>
<Checkbox
onCheck={() => {
let correctOrIncorrect = null;
if (questionInputs[0].correct) {
correctOrIncorrect = false;
} else {
correctOrIncorrect = true;
}
this.props.questionInputChanged({
inputIndex: 0,
value: null,
correct: correctOrIncorrect
});
}}
style={styles.checkbox}
/>
</div>
Inline styles used in the code are as follows:
const styles = {
createQuizContainer: {
width: '70%',
margin: 'auto',
paddingTop: 30,
paddingBottom: 40
},
answerField: {
width: '70%',
},
checkBox: {
display: 'inline',
}
};
I would greatly appreciate any help or advice on working with CSS layouts!
Thank you.