React Material UI: текстовые поля остаются в одной строке - PullRequest
Новая
       13

React Material UI: текстовые поля остаются в одной строке

0 голосов
/ 12 февраля 2019

Я хочу, чтобы мои три текстовых поля всегда занимали одну и ту же строку, даже если я изменяю размер страницы.Мои текстовые поля расположены внутри карты, и я попытался обернуть текстовые поля сеткой, но безрезультатно.

Вот мой код: 

<CardContent style={{padding: "32px"}}>
                ....
                ....
                <Grid container spacing={24}>
                    <Grid item xs={12}>
                        <TextField
                            id="re_ps"
                            label="PS"
                            value={this.state.re_pe_value}
                            onChange={this.re_ps_handleChange('value')}
                            margin="normal"
                            type="number"
                            margin = "dense"
                            variant = "filled"
                            style={{paddingRight: "20px", width: "170px"}}
                        />
                        <TextField
                            id="re_mooe"
                            label="MOOE"
                            value={this.state.re_mooe_value}
                            onChange={this.re_mooe_handleChange('value')}
                            margin="normal"
                            type="number"
                            margin = "dense"
                            variant = "filled"
                            style={{paddingRight: "20px", width: "170px"}}
                        />
                        <TextField
                            id="re_co"
                            label="CO"
                            value={this.state.re_co_value}
                            onChange={this.re_co_handleChange('value')}
                            margin="normal"
                            type="number"
                            margin = "dense"
                            variant = "filled"
                            style={{paddingRight: "20px", width: "170px"}}
                        />
                    </Grid>
                </Grid>
            </CardContent>

Можно ли добиться того, чегоЯ хочу?

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Попробуйте установить стили для CardContent равными {display: 'flex'} без этих Grid-контейнеров.Пусть TextFields будут прямыми потомками CardContent

0 голосов
/ 12 февраля 2019

Оберните каждый TextField в компонент Grid, и вы получите желаемый результат. 

<Grid container spacing={24}>
    <Grid item xs={4}>
        <TextField
            id="re_ps"
            label="PS"
            value={this.state.re_pe_value}
            onChange={this.re_ps_handleChange('value')}
            margin="normal"
            type="number"
            margin = "dense"
            variant = "filled"
            style={{paddingRight: "20px", width: "170px"}}
        />
    </Grid>
    <Grid item xs={4}>
        <TextField
            id="re_mooe"
            label="MOOE"
            value={this.state.re_mooe_value}
            onChange={this.re_mooe_handleChange('value')}
            margin="normal"
            type="number"
            margin = "dense"
            variant = "filled"
            style={{paddingRight: "20px", width: "170px"}}
        />
    </Grid>
    <Grid item xs={4}>
        <TextField
            id="re_co"
            label="CO"
            value={this.state.re_co_value}
            onChange={this.re_co_handleChange('value')}
            margin="normal"
            type="number"
            margin = "dense"
            variant = "filled"
            style={{paddingRight: "20px", width: "170px"}}
        />
    </Grid>
</Grid>
...