ionic-team / ionic-team/ionic-framework
bug: ion-back-button text moves other elements out of toolbar
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 51
描述
# Bug Report
**Ionic version:**
[x] **5.x**
**Current behavior:**
Using a longer text for `ion-back-button` shows the following problems:
* it is placed behind the `ion-title` (if exists)
* it moves other elements (like `ion-buttons`) out of the header


**Expected behavior:**
The back button's text is truncated somehow, e.g. with `text-overflow: ellipsis`.
**Steps to reproduce:**
1. Create a new app `ionic start myApp blank`
2. Add two new pages `ionic generate page myPageX`
3. Add
* `ion-back-button` with a long `text` to both pages
* some `ion-title` to one page
* some `ion-buttons` with `slot=end` to the end of the header's toolbar
4. Open those pages on a small screen device (e.g. iPhone SE). You will see the problem.
**Related code:**
See repository for example: https://github.com/pj035/ionic-issue-back-button-long-test
```html
```
**Other information:**
Could be related to https://github.com/ionic-team/ionic/issues/8700.
**Ionic info:**
```
$ ionic info
Ionic:
Ionic CLI : 6.6.0 (/home/philipp/.nvm/versions/node/v10.18.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
Utility:
cordova-res (update available: 0.13.0) : 0.11.0
native-run (update available: 1.0.0) : 0.3.0
System:
NodeJS : v10.18.0 (/home/philipp/.nvm/versions/node/v10.18.0/bin/node)
npm : 6.13.4
OS : Linux 5.6
```
**Notes**
I'm not sure yet if this a bug report or rather a feature request. I could imagine a solution, which provides the developer some more flexibility, like setting a max-width for the back button (text), that automatically truncates the text then.
PS: I could image to contribute here, but at first I want to wait how its best to proceed on such an issue (fixing or new feature).
贡献指南
调研方向
Start by reproducing the issue with the provided ion-header, ion-toolbar, ion-back-button, ion-title, and ion-buttons markup on a small-screen viewport. Trace the ion-back-button and toolbar component entry points, then verify that long back-button text is truncated without overlapping the title or moving end-slot buttons outside the toolbar.
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100