Reduce the height of antd-mobile Form.Item

[beauauto]

The Form.Item of antd-mobile looks big and tall, especially on a phone. How do we reduce the height of antd-mobile form.item?

[awmleer]

Hey could you please offer a screenshot of the problem and a reproduce demo so we can investigate it?

[beauauto]

I created a sandbox project. It is simply a antd-mobile form. The form item is tall. I like to reduce the height of the item by reducing the space for each item and the space between items.

https://codesandbox.io/s/bold-mirzakhani-v3rske?file=/src/App.js

[awmleer]

Seems like you didn't save the codesandbox project. I opened your sandbox but got a default template.

[beauauto]

This is a snapshot from my IPhone. The space between form items is large. It would be nice to shrink the height of individual form item and the margin between them.

The code snippet is below.

<Form
    layout='vertical'
>
    <Form.Header
    ><div style={{'fontSize':'20px'}}>Please provide a few details about yourself.</div></Form.Header>
    <Form.Item name='Email' label='Email'
               rules={[{ required: true }]}>
        <Input type={'email'} placeholder=''
               style={{
                   '--font-size':'10px'}}/>
    </Form.Item>
    <Form.Item name='ConfirmEmail' label='Confirm Email'
               rules={[{ required: true }, {validator: confirmEmail}]}>
        <Input type={'email'} placeholder='' />
    </Form.Item>
    <Form.Item name='FirstName' label='First Name'
               rules={[{ required: true }]}>
        <Input placeholder='' />
    </Form.Item>
    <Form.Item name='LastName' label='Last Name'
               rules={[{ required: true }]}>
        <Input placeholder='' />
    </Form.Item>
    <Form.Item name='MiddleName' label='Middle Name'>
        <Input placeholder='' />
    </Form.Item>
    <Form.Item name='Suffix' label='Suffix'>
        <div style={{display: "flex"}}>
            <Button  style={{ marginLeft: "auto" }}
                     onClick={() => {
                         setVisible(true)
                     }}
            >
                <DownOutline />
            </Button>
        </div>

        <Picker
            columns={[[
                { label: 'Mr', value: 'Mr' },
                { label: 'Mrs', value: 'Mrs' },
                { label: 'Ms', value: 'Ms' },
            ]]}
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            value={value}
            onConfirm={v => {
                setValue(v)
            }}
        />
    </Form.Item>
    <Form.Item name='Phone' label='Phone'>
        <Input type={'tel'} placeholder='' />
    </Form.Item>
    <Form.Item name='PhoneType' label='Phone Type'>
        <Selector
            options={[
                { label: 'Mobile', value: 'Mobile' },
                { label: 'Home', value: 'Home' },
                { label: 'Work', value: 'Work' },
            ]}
        />
    </Form.Item>
    <Form.Item name='MarritalStatus' label='Marital Status'>
        <Selector
            options={[
                { label: 'Married', value: 'Married' },
                { label: 'Separated', value: 'Separated' },
                { label: 'Unmarried', value: 'Unmarried' },
            ]}
        />
    </Form.Item>
    <Form.Item name='SameAddress' label=''>
        <Checkbox style={{'--icon-size':'14px',
        '--font-size':'12px'}}>Mailing address the same as above </Checkbox>
    </Form.Item>

</Form>

[beauauto]

I updated the sandbox project and saved it. I hope it works this time. Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows From: ***@***.***> Sent: Saturday, June 25, 2022 11:46 AM To: ***@***.***> Cc: ***@***.***>; ***@***.***> Subject: Re: [ant-design/ant-design-mobile] Reduce the height of antd-mobile Form.Item (Discussion #5403) Seems like you didn't save the codesandbox project. I opened your sandbox but got a default template. — Reply to this email directly, view it on GitHub<#5403 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHEMN3FXTF4Z3NK23RIM3JTVQ4ST5ANCNFSM5ZYFE77Q>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[awmleer]

It's still the same. Please make sure you can see the demo after refreshing the page.