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

Ionic Framework Ionic Vue
1

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

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 :

Screenshot from 2021-12-22 14-08-11
Screenshot from 2021-12-22 14-08-111345×174 4.9 KB

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 :

Screenshot from 2021-12-22 14-17-15

Thanks a lot in advance for any hints or solutions :slight_smile:

2

Hi
as far as I can see isn’t color a valid input type (ion-input: Custom Input Value Type Styling and CSS Properties)
The standard html input does seem to have this type, so maybe consider that one?
Tom

3

Yes i noticed that , but the reason i did not use standard HTML input is that later the App should be compiled to run on Android and i thought maybe using Standard HTML will cause Bugs or Issues !

That is why i was hoping if there is a way to get that color Picker as an Ionic tag

4

Ionic ain’t no different from standard HTML looking at the way Android/iOS is handing it - I consider it in fact something on top of it. So this assumption imho is not correct. You can and should be using standard HTML elements if Ionic is not providing what you need.

1 Like
5

Thanks a lot for explanation :slight_smile: then i think that should be the solution i am looking for .

1 Like