ionic-team / ionic-team/ionic-framework

bug: ion-back-button text moves other elements out of toolbar

未关闭
#21,146 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: bug
主要语言
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

![screencapture-localhost-4200-page-with-long-name-2020-04-28-07_08_56](https://user-images.githubusercontent.com/3854502/80449344-2ec6e680-891f-11ea-9de3-e84baf4e5b1b.png)
![screencapture-localhost-4200-page-with-title-2020-04-28-07_09_07](https://user-images.githubusercontent.com/3854502/80449346-2f5f7d00-891f-11ea-9bc7-b4582efdd68c.png)

**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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。