Как разместить диалоговое окно формы в пользовательском интерфейсе материала?

Question

Я создал простую форму с https://material -ui.com /

Mt форма имеет два поля:

Я реализовал всплывающее окно диалогового окна формы, когда пользователь нажимает в поле «Имя бронирования».

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

Любые идеи, как это исправить:

Вот мой код Dialoge:

<Dialog open={this.state.booking_name_dialog_open} aria-labelledby="form-dialog-title" maxWidth={"lg"} fullWidth={true}>
    <DialogTitle id="form-dialog-title">Booking name:</DialogTitle>
    <DialogContent>
        <TextField autoFocus margin="dense" id="name" label="Booking name" type="text" fullWidth/>
    </DialogContent>
    <DialogActions>
        <Button color="primary">Cancel</Button>
        <Button color="primary">Submit</Button>
    </DialogActions>
</Dialog>

Любая помощь приветствуется!

Answer 1

Итак, проблема была из-за плагина StatusBar.Только не используйте его, и у вас не будет такой проблемы.

Answer 2

Вы можете попробовать использовать плагин 'cordova-plugin-ionic-keyboard' https://github.com/ionic-team/cordova-plugin-ionic-keyboard и проверить, решается ли он.

Answer 3

Вы можете обернуть свою форму внутри основного компонента из Reaction-native

import {keyboardAvoidingView} из'act-native ';

<KeyboardAvoidingView>
<form>
</form>
</KeyboardAvoidingView>

Надеюсь, это поможет.