Ionic-framework: ion-searchbar cancel not visible if ion-toolbar has background color

[aggarwalankush]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

ion-searchbar inside ion-toolbar is very less visible and cancel is not visible if ion-toolbar has background color

Expected behavior:

ion-searchbar should be clearly visible independent of ion-toolbar color

Steps to reproduce:

Related code:

 <ion-toolbar color='primary'>
    <ion-searchbar
      placeholder="Search here"
      [showCancelButton]="true"
      (ionInput)="onSearchInput($event)"
      (ionCancel)="onSearchCancel($event)">
    </ion-searchbar>
  </ion-toolbar>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.7.0
Xcode version: Xcode 8.1 Build version 8T61a

[jsayol]

I just tested this and I see it just fine, using the defaults. I only changed the primary color to match the one you're using:

You probably changed some other colors in your styles or the theme variables and that's causing this issue for you.

[jgw96]

Hello everyone, thanks for opening an issue with us! @aggarwalankush have you added any custom css to the searchbar or toolbar? Also @jsayol , what does your template look like compared to the markup @aggarwalankush posted ?

[jsayol]

Hey @jgw96, I just started a new blank project and then copied @aggarwalankush's markup into the Home page template's header.

Looks like this;

<ion-header>
  <ion-navbar color='primary'>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
  <ion-toolbar color='primary'>
    <ion-searchbar
      placeholder="Search here"
      [showCancelButton]="true"
      (ionInput)="onSearchInput($event)"
      (ionCancel)="onSearchCancel($event)">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

[aggarwalankush]

@jgw96 I found the problem.
<ion-toolbar color='primary'> works but I'm globally setting all toolbars color to primary using $toolbar-background: color($colors, primary); in variables.scss which causes this searchbar css issue. How can I globally change toolbar color to avoid this issue?

Steps to reproduce

• Clone ionic-conference-app
• Change

$toolbar-md-background:                   color($colors, primary);
$toolbar-md-active-color:                 #fff;

to

$toolbar-background:                   color($colors, primary);
$toolbar-active-color:                 #fff;

• Searchbar is less visible and cancel is not visible at all

But if you add color='primary' to https://github.com/driftyco/ionic-conference-app/blob/master/src/pages/schedule/schedule.html#L23, it works like charm.

[brandyscarney]

@aggarwalankush This could probably be easier to achieve, but the following variables will get the look you want for searchbar on iOS:

$toolbar-background:                           color($colors, primary);
$toolbar-active-color:                         #fff;

// This is a variable I made up to reuse for searchbar colors
$toolbar-contrast-color:                       color-contrast($colors, $toolbar-background);

// Override searchbar colors
$searchbar-ios-toolbar-input-background:       rgba($toolbar-contrast-color, .08);
$searchbar-ios-input-text-color:               $toolbar-contrast-color;
$searchbar-ios-input-placeholder-color:        rgba($toolbar-contrast-color, .5) !default;
$searchbar-ios-input-clear-icon-color:         rgba($toolbar-contrast-color, .5) !default;
$searchbar-ios-input-search-icon-color:        rgba($toolbar-contrast-color, .5) !default;

[aggarwalankush]

@brandyscarney Thanks for the info. It's easier to set <ion-toolbar color='primary'> which magically works perfectly than overriding so many variables manually. Also, I feel I shouldn't override many variables as ionic team always keep them in sync with official material or ios design specs. 👍

[brandyscarney]

I'm reopening this as I'd like to add a variable to make it easier to style the Cancel button for searchbar in iOS and override the variables.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!