Selecting color doesn't work as excpected

Select pickers & dropdowns
,
1

When I select the color using mbsc-color directive the input field just writes in hex value of the color. It should paint the field using the selected color as it is shown in demo. Here is the code that I used:

Html:

          <ion-item>
              <ion-label>{{ 'ADMIN.color' | translate }}</ion-label>
              <ion-input formControlName="color" mbsc-color [mbsc-options]="colorSettings" [mbsc-data]="colors" placeholder="Select Color" ></ion-input>
          </ion-item>

TS:

  colorSettings: any = {
    theme: 'aces-ios',
    select: 'single',
    navigation: 'vertical',
    rows: '3'
  };

  public colors = ['#800000', '#FF0000', '#FFA500', '#FFFF00', '#808000', '#800080', '#FF00FF', '#008000', '#00FF00', '#008080', '#00FFFF', '#0000FF', '#000080', '#000000', '#808080', '#C0C0C0', '#FFFFFF'];

15%20PM
15%20PM756×1378 57.2 KB

Thanks

2

After playing around I added enhance="true" to the html code and it finally changed the color, but it defiantly does not look as good as it is in demo and placeholder is not displayed. When I place the enhance code inside colorSettings nothing happens

      <ion-item>
        <ion-label>{{ 'ADMIN.color' | translate }}</ion-label>
        <ion-input formControlName="color" mbsc-color [mbsc-options]="colorSettings" [mbsc-data]="colors" placeholder="Select Color" enhance="true"></ion-input>
      </ion-item>

If i play around with it in inspect, I can make it look as it was presented in demo. For example, I can turn off the border in .mbsc-color-input:not(.mbsc-comp) class.

44%20PM
44%20PM756×702 32.6 KB

3

Hi Nikola,

The styling you’re referring to (painting the field), is provided by the <mbsc-color> component, and it doesn’t work with the mbsc-color directive on an ion-input component.

There are a few possible solutions if you’d like to do that with an ion-input as well:

  1. Use the enhance option, like you did. This will provide a generic styling with the color, but will need some styling tweaks to appear well with ion-input. Example styling:
.mbsc-color-input:not(.mbsc-comp) {
  border: 0;
  min-height: 0;
}

.mbsc-color-input-item {
  border-radius: 3px;
}

For the placeholder to appear, make sure the initial value passed (color) is null

  1. Update the ion-input color manually:
  <ion-item>
    <ion-label>Test</ion-label>
    <ion-input formControlName="color" mbsc-color [mbsc-options]="colorSettings" [mbsc-data]="colors" placeholder="Select Color" #ionInput></ion-input>
  </ion-item>

  @ViewChild('ionInput', { read: ElementRef })
  ionInput: ElementRef;

  colorSettings: any = {
    onClear: () => {
      this.setInputColor();
    },
    onSet: () => {
      this.setInputColor();
    }
  };

  setInputColor() {
    setTimeout(() => {
      const inputStyle = this.ionInput.nativeElement.querySelector('input').style;
      inputStyle.background = this.color;
      inputStyle.borderRadius = '3px';
      inputStyle.color = 'transparent';
    });
  }

Let me know if one of this works for you!

Best,
Isti

4

The second method worked perfectly for me.

When I used the first method, no matter what I tried I could not display the placeholder or pass the color through formControlName.

Thanks