search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.93k stars 13.52k forks source link

bug: ion-searchbar width miscalculated on desktop when in scrollable zone #20565

Open Yohandah opened 4 years ago

Yohandah commented 4 years ago

Bug Report

Ionic version:

[x] 4.x [x] 5.x

Current behavior: When a <ion-searchbar> is in a scrollable area and in desktop mode, the placeholder is truncated (by the clear button area I believe). The width of the searchbar doesn't seem to know that the scrollbar is here so the font size does not adjust.

Expected behavior: The label shouldn't be truncated. On a phone it works fine.

Steps to reproduce: Put a searchbar into a menu and then add many items to make it scrollable.

Other information: Bug when scrollable : scrollable_menu

No bug when not scrollable : non_scrollable_menu

Ionic info:

Ionic:

   Ionic CLI                     : 6.0.2 (C:\Users\xxx\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.0.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.12.1
   OS     : Windows 10
Yohandah commented 4 years ago

I still have the issue, I believe this is not even a scrollbar issue, but just that the "clear" icon takes the space and covers the placeholder.

Would it be possible to add a CSS Custom Property to change the font-size for the placeholder ? Or maybe stop using the native input placeholder and try using a ion-label which as a mechanic of truncating the placeholder with "..." or auto adjusting the font-size ?

ionitron-bot[bot] commented 4 years ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

Yohandah commented 4 years ago

There is no way to specify the font-size of the placeholder and it is here truncated by the "clear" button. We could use the pseudo-element ::placeholder but it is not exposed by the custom component "ion-searchbar" https://developer.mozilla.org/fr/docs/Web/CSS/::placeholder

https://stackblitz.com/edit/ionic-v5-searchbar-placeholder