I’m currently working on a ReactJS project and my objective is simple: I want all three <FormItem> components to be displayed in a single line without wrapping. However, I am facing the following output:
https://i.stack.imgur.com/mxiIE.png
Within the myComponent.tsx file, here is the render() function that I have implemented:
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayoutType = {
labelCol: { span: 1, offset: 0 },
wrapperCol: { span: 3, offset: 0 },
};
const myForm = {
display: "inline",
whiteSpace: "nowrap"
} as React.CSSProperties;
return (
<Form onSubmit={this.handleSubmit} style={myForm}>
<span>
<FormItem
// {...formItemLayoutType} // originally, this was not commented out
hasFeedback
>
{getFieldDecorator('select', { valuePropName: "fileType" })(
<Select placeholder="Select file type" style={{ width: "150px" }}>
<Option value="PD">Probabilty of default</Option>
<Option value="FX">Exchange Rate</Option>
</Select>
)}
</FormItem>
<FormItem>
<Button type="primary" htmlType="submit"
disabled={this.disabledImportButtonChecker()}>Import</Button>
</FormItem>
</span>
</Form>
);
}
}
Despite adding the <span> and applying the style={myForm}, the structure still doesn’t look aligned horizontally as expected. I'm puzzled by why this issue persists instead of having everything lined up in one row.
References
- Prevent <form> line break between two <form> tags suggests utilizing
display: inline. - https://alligator.io/css/prevent-line-break/