ionic-team / ionic-team/ionic-framework

bug: Ion footer has no padding if app has ion tab bar hidden

オープン
#30,192 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る
triage
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

```
render() {
const { translucent, collapse } = this;
const mode = getIonMode(this);
const tabs = this.el.closest('ion-tabs');
const tabBar = tabs?.querySelector(':scope > ion-tab-bar');

return (

{mode === 'ios' && translucent &&

}


);
}
```

ion-footer doesn't have the "footer-toolbar-padding" if app contains a tab-bar

### Expected Behavior

As there are some workaround online to hide the tab bar when navigating to child routes I think there should be a check of whether the tab-bar is displayed (by checking if display none is applied).
That way there is no harm to a case where the tab bar is always shown but benefit when a user wants to manually hide it in some pages
Btw there could be serval ways to hide or show the tab bar but that's not the main thing I wanted to show

### Steps to Reproduce

https://stackblitz.com/edit/sb1-wnpdveiy?file=src%2Fpages%2FTabsPage.tsx

You won't be able to see the problem not on real device unless you inspect the classes in DOM

### Code Reproduction URL

https://stackblitz.com/edit/sb1-wnpdveiy?file=src%2Fpages%2FTabsPage.tsx

### Ionic Info

"@ionic/react": "^8.4.3",
"@ionic/react-router": "^8.4.3",
"ionicons": "^7.2.2",
"lucide-react": "^0.344.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4"

### Additional Information

_No response_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with the ion-footer render logic shown in the issue and reproduce the behavior using the linked StackBlitz TabsPage.tsx example. Verify the footer's padding class when the tab bar is hidden, and confirm the fix against the tab-bar-visible and tab-bar-hidden cases.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。