Блог

Главная - Вопросы по программированию - ионный нижний колонтитул не отображается, когда ионный контент содержит элементы

ионный нижний колонтитул не отображается, когда ионный контент содержит элементы

#javascript #angular #capacitor #ionic5 #angular12

Вопрос:

ion-footer Не отображается, когда у my ion-content есть элементы

В этом коде нижний колонтитул не отображается :

 <ion-content>
  <div class="text-center">
    <p class="text-gray-800 text-3xl font-bold m-0">{{user.name}}</p>
    <p class="text-gray-400 mt-2">{{user['custom:role']}}</p>
  </div>
  <ion-button expand="block" color="primary">logout</ion-button>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

И это работает :

 <ion-content>
  <ion-button expand="block" color="primary" (click)="cognito.logout()">logout</ion-button>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

Я попытался удалить div p теги и, используя ion-text или, чтобы удалить кнопку и сохранить только p / ion-text

Но я не могу заставить нижний колонтитул отображаться с содержимым (кроме ion-button ) в моем ion-content .

На данный момент я использую некоторый css, без ion-нижнего колонтитула. Я бы предпочел найти нехакерное решение.

Комментарии:

1. в случае, если для вашего кода есть какой-либо CSS, специфичный для вашего кода, вы также должны опубликовать его.

2. Единственный css, который есть на странице, — это хак, который я сделал, чтобы воспроизвести поведение ion-нижнего колонтитула. Но в любом случае, чтобы воспроизвести это, я думаю, нам понадобится нечто большее, чем css, поскольку в некоторых случаях это работает.

3. Ваше приложение заключено в теги <ion-app>?

4. Да, это так. Мой app.component.html это ионное приложение с ионным маршрутизатором-розеткой, завернутым в него

5. Я бы рекомендовал создать демонстрационный код на stackblitz.com для быстрого ответа.

Метки: ,