Исправляйте ионы-заголовки в верхней части страницы, когда клавиатура появляется в приложении Ionic

У меня есть приложение для чата, когда я нажимаю на textarea чтобы начать вводить новое сообщение, клавиатура подталкивает все содержимое выше. Это означает, что ion-header исчезает. Я бы хотел, чтобы это все время отображалось в верхней части экрана.

Вот пример GIF: https://i.imgur.com/a/GcmagJi

Код ion-header:

<ion-header>

  <ion-navbar>
    <ion-buttons ion-fixed end>
      <button ion-button icon-only (click)="closeChat()">
        <ion-icon name="close-circle"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>

Код ion-footer:

<ion-footer>
  <ion-grid>
    <ion-row>
      <ion-col col-9>
        <textarea rows="3" [(ngModel)]="data.message" (keyup.enter)="sendMessage()" placeholder="Type your message ..."></textarea>
      </ion-col>
      <ion-col col-3>
          <button ion-button (click)="sendMessage()">Send</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

В моем файле app.module.ts я использовал:

imports: [
  BrowserModule,
  LongPressModule,
  IonicModule.forRoot(MyApp, {
      scrollPadding: false,
      scrollAssist: true,
      autoFocusAssist: false
    }
  ),
  IonicStorageModule.forRoot(),
  DragulaModule,
  HttpModule
]

В моем chat.ts меня есть:

constructor(private keyboard: Keyboard) {
    this.keyboard.disableScroll(false);             
}

Несмотря на все эти вещи, кажется, что заголовок не фиксируется на месте.

Я добавил полный код для chat.html и chat.ts в GitHib Gists ниже:

https://gist.github.com/christopherib/4b9e70590fb322bdc33ffbbe42d50685 https://gist.github.com/christopherib/cb3d234564c0feb1e8bf5b96f8d023c3

Ответы

Ответ 1

Когда появится клавиатура, запустите js-функцию. При этом дайте заголовку отрицательный запас.

Пример:

function myFunction() { document.getElementById("myDiv").style.marginBottom = "-15px"; }

Источник: https://www.w3schools.com/jsref/prop_style_marginbottom.asp

Вероятно, это более эффективное решение, но если положение: исправлено, это не работает, это лучшее, что я могу придумать.

Ответ 2

Вы можете использовать ион-элемент-делитель под ион-заголовок, как

<ion-header>
  <ion-item-divider sticky>
    <!-- Content -->
  </ion-item-divider>
</ion-header>

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

Ответ 3

Попробуйте запустить keyboard.disableScroll(true) сразу после platform.ready()

Или попробуйте запустить keyboard.hideFormAccessoryBar(false);

Ответ 4

Вы пробовали использовать?

<ion-content fullscreen><ion-content>

В настоящее время я использую Ionic 4, и заголовок все еще выглядит хорошо, когда клавиатура открывается

У меня есть следующая структура

<ion-header no-border>
    <ion-toolbar>        
        <ion-fab-button>
            <ion-icon name="ios-arrow-back"></ion-icon>
        </ion-fab-button>             
        <ion-title></ion-title>
    </ion-toolbar>
</ion-header>

<ion-content fullscreen>        
    ......
</ion-content>

<ion-footer no-border>  
    ......
</ion-footer>