ionic-team / ionic-team/ionic-framework

feat: iOS search bar in header styling support

未关闭
#21,455 12 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

# Feature Request

**Ionic version:**

[x] **5.x**

**Describe the Feature Request**

While working with a member of the community, we discovered that there is a design oddity when placing an `ion-searchbar` inside an `ion-toolbar` inside an `ion-header`.

`ion-searchbar` will be given a `padding-bottom: 15px;` value when the `ion-toolbar .sc-ion-searchbar-ios-h` CSS selector is applied.

When given `padding-bottom: 15px`, the `ion-searchbar` does not vertically align correctly with other elements placed within the `ion-toolbar`.

**Describe Preferred Solution**

It might be beneficial to add styling that reduces the `padding-bottom` value of an `ion-searchbar` component when it's placed inside an `ion-toolbar` inside of an `ion-header`, something to the effect of:

```
ion-header ion-toolbar .sc-ion-searchbar-ios-h {
padding-bottom: // some better value
}
```

**Describe Alternatives**

It's always possible to introduce a custom CSS class at the project level that overrides the `padding-bottom` value set by the framework. However, this design paradigm appears to be popular in the mobile world and might be worth supporting within the Ionic Framework.

**Related Code**

A repro has been built that showcases the issue. It can be found here: https://github.com/ehorodyski-ionic/ng-searchbar-in-header

The relevant portion of code to reproduce this issue is:
```









```

**Additional Context**

The screenshot below highlights the UX when running on an iOS simulator. Ideally, the `ion-searchbar` would be better vertically aligned with the other elements contained within the `ion-toolbar`.
![header](https://user-images.githubusercontent.com/62819287/84040743-00521780-a971-11ea-89a5-73f88391848c.png)

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

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