javascript - React Bootstrap Form Control- Unable To Adjust Height in Table Row

Question

I've gone for some inline styles to adjust React bootstrap's form control buttons in a table. For some reason, the height of one of the inputs is bigger than the rest (observe the image- Pens Home is jutting out compared to the others). I don't understand why this is the case, I have only adjusted the width for the inline styles.... Here is my code:

const KnockoutMatch = () => {

    return (
        <Card style={{ marginBottom: '20px' }}>
            <Table responsive style={{ fontSize: '17.5px' }}>
                <thead>
                    <tr>
                        <td
                            style={{
                                fontWeight: 'bold'
                            }}
                        >
                           Second Round
                        </td>
                    </tr>
                    <tr>
                        <th>Home</th>
                        <th>Away</th>
                        <th>Home Score</th>
                        <th>Home ET</th>
                        <th>Pens Home</th>
                        <th>Away Score</th>
                        <th>Away ET</th>
                        <th>Pens Away</th>
                        <th>Settled</th>
                        <th>Prices</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style={{ width: '18.5%', wordBreak: 'break-all' }}>
                           Spain
                        </td>
                        <td style={{ width: '18.5%', wordBreak: 'break-all' }}>
                            Switzerland
                        </td>
                        <td style={{ width: '5%' }}>
                            <Form>
                                <Form.Control
                                    type='number'
                                    name='homeScore'
                                    defaultValue={0}
                                    min='0'
                                    max='100'
                                    size='sm'
                                />
                            </Form>
                        </td>

                        <td style={{ width: '5%' }}>
                            <Form>
                                <Form.Control
                                    type='number'
                                    name='homeET'
                                    defaultValue={0}
                                    min='0'
                                    max='100'
                                    size='sm'
                                />
                            </Form>
                        </td>

                        <td style={{ width: '5%' }}>
                            <Form>
                                <Form.Control
                                    type='number'
                                    name='homePens'
                                    defaultValue={0}
                                    min='0'
                                    max='100'
                                />
                            </Form>
                        </td>
                        <td style={{ width: '5%' }}>
                            <Form>
                                <Form.Control
                                    type='number'
                                    name='awayScore'
                                    defaultValue={0}
                                    min='0'
                                    max='100'
                                    size='sm'
                                />
                            </Form>
                        </td>
                        <td style={{ width: '5%' }}>
                            <Form>
                                <Form.Control
                                    type='number'
                                    name='awayET'
                                    defaultValue={0}
                                    min='0'
                                    max='100'
                                    size='sm'
                                />
                            </Form>
                        </td>

                        <td style={{ width: '5%' }}>
                            <Form>
                                <Form.Control
                                    type='number'
                                    name='awayPens'
                                    defaultValue={0}
                                    min='0'
                                    max='100'
                                    size='sm'
                                />
                            </Form>
                        </td>
                        <td style={{ width: '5%' }}>
                            <BootstrapSwitchButton
                                onlabel='Yes'
                                offlabel='No'
                                checked={fixture[0].settled}
                                onChange={updateFixtureStatus(fixture[0].id)}
                                width={65}
                                height={12.5}
                                disabled={teamIdCheck(fixture[0].id) === true ? true : false}
                            />
                        </td>
                        <td style={{ width: '5%' }}>
                            <IconEdit
                                style={{ cursor: 'pointer' }}
                            />
                        </td>
                    </tr>
                </tbody>
            </Table>
        </Card>
    );
};

When I try to adjust the height in inline style, nothing seems to change. Any ideas why this is the case?

question from:https://stackoverflow.com/questions/65896209/react-bootstrap-form-control-unable-to-adjust-height-in-table-row

Answer 1

Waitting for answers