ionic-team / ionic-team/ionic-framework

feat: iOS search bar in header styling support

Abierto
#21,455 12 comentarios 2 reacciones 0 asignados Ver en GitHub
package: core type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.