ionic-team / ionic-team/ionic-framework

feat: iOS search bar in header styling support

オープン
#21,455 コメント 12 件 リアクション 2 件 担当者 0 名 GitHub で見る
package: core type: bug
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
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 を短くまとめたダイジェスト。