Search code examples
cssreactjsantd

How to resolve text alignment issue in AntD form

I have an AntD Modal which has a Form that I'm struggling to align some text on. Here is what it looks like with the text highlighted in yellow. I would like it to be aligned with the first column where I've drawn the red box.

enter image description here

The section of code that contains the "personal information" text and the applicant form fields looks like this:

  <Form
    ref={this.formRef}
    {...formItemLayoutWithOutLabel}
    onFinish={onFinish}
    id="myForm"
    validateMessages={validateMessages}
    initialValues={{ applicants: [{ firstName: '' }] }}
  >
    {
      <Form.List name="applicants">
        {(fields, { add, remove }) => {
          return (
            <div>
              <Form.Item {...formItemLayout}}>
                <Row>
                  <Col span={24}>
                    Personal Information
                  </Col>
                </Row>
              </Form.Item>
              {fields.map((field, index) => (
                <Form.Item {...formItemLayout} label={`Applicant #${index + 1}`} key={field.key}>
                  <Row key={field.key} gutter={[0, 8]} justify="start">
                    <Col span={12}>
                      <Row gutter={[4, 4]}>
                        <Col span={7}>
                          <Form.Item name={[field.name, 'firstName']} fieldKey={[field.fieldKey, 'firstName']} rules={rules}>
                            <Input placeholder="First Name" ref={this.inputRef} />
                          </Form.Item>
                        </Col>

I thought perhaps if I set the label to a blank space it'd accomplish what I want on the form item and it does, but of course, the colon remains which I don't want. So I'm guessing this is not the right way to accomplish this and perhaps there's a better CSS route to go or something.

enter image description here

I'm looking for help on how to get the alignment that I want. Ultimately I'd also like to put "Employer Information" aligned with the right column over the employer information as well.

EDIT #1

Adding a simplified codesandbox of this problem here. Appreciate any ideas!

CodeSandBox

Solution

  • There is an option for Form.Item to display the colon behind the label. You can check it out here

    Disable it would accomplish what you want

    <Form.Item {...formItemLayout} label=" " colon={false}>
  <Row gutter={[0, 8]} justify="start">
    <Col span={12}>Personal Information</Col>
    <Col span={12}>Employer Information</Col>
  </Row>
</Form.Item>