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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…