ionic-team / ionic-team/ionic-framework

feat: iOS search bar in header styling support

Ouverte
#21,455 12 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
package: core type: bug
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

# 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)

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.