Ionic-input type color , does not look good and it is hard to notice that is a color picker

Hello everyone ,
i am new to Ionic Vue and i am really loving it

Unfortunately i kind of have a Bug which i did not find any ways around it so i am hoping i get some help from you guys here.

I am developing kind of Photo editing app . For that i have a part which user can add text on the picture.
The text should be editable ( Size, Position, Color ) for these i have Input fields which all are working fine.

The Problem is my Color Input which does not look like a Color Picker !!

Here is a screenshot of how it looks :

Here is my Code for that part :

<template>
  <ion-grid>
    <ion-row>
      <ion-input
        type="text"
        placeholder="Write your text here..."
        v-model="textAttrs.text"
        @change="updateText"
      />
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-label>Font Size</ion-label>
        <ion-input
          type="number"
          v-model="textAttrs.fontSize"
          @change="updateText"
        />
      </ion-col>
      <ion-col id="color-input">
        <ion-label>Color</ion-label>
        <ion-input type="color" v-model="textAttrs.color" @change="updateText" />
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-label>Position X-axis</ion-label>
        <ion-input
          type="number"
          v-model="textAttrs.positionX"
          @change="updateText"
        />
      </ion-col>
      <ion-col>
        <ion-label>Position Y-axis</ion-label>
        <ion-input
          type="number"
          v-model="textAttrs.positionY"
          @change="updateText"
        />
      </ion-col>
    </ion-row>
  </ion-grid>
</template>

As it is obvious to see the Color Picker is shown as a Straight line which i want it to look something like this :

Thanks a lot in advance for any hints or solutions

3 posts - 2 participants

Read full topic