2

I need to modify ion-select like this value is in left and the drop down arrow in right. it happens when i use google dev tools. but in code wherever it tried it won't work

1st i tried in using google console and this is the original one this

this is after modified this

then I tried to use this in app.scss

 ion-select
{
    .select-text{
          position: absolute !important;
          right:0 !important;
    }
}

But it won't happen.

LVW23
  • 85
  • 2
  • 13
  • in dev tools you see the class `.select-icon` but in your css, you use `.select-text` – BizzyBob Jun 14 '19 at 12:27
  • Can you post your HTML code here? so we can get some idea what's going wrong with your code and CSS. – CodeChanger Jun 14 '19 at 12:33
  • Does this answer your question? [How to remove small caret from ion-select in ionic4](https://stackoverflow.com/questions/55300777/how-to-remove-small-caret-from-ion-select-in-ionic4) – parrycima Dec 05 '19 at 10:07

2 Answers2

3

A solution to your problem applies max-width on your ion-select like below :

ion-select
{
  max-width: 95%;
}

use it as per your design requirement it will use the full width and show your select control as per your requirement.

By default, ion-select uses 45% width that's why you are facing this issue.

Hope this will helps!

CodeChanger
  • 7,953
  • 5
  • 49
  • 80
  • @LVW23 is above solution resolved your problem? if yes can you please accept this answer? so others can find it helpful. – CodeChanger Jun 17 '19 at 05:16
1

As you may know Ionic introduce Shadow root elements with new updates. You can change css from typescript. I found This solution for me.

How to remove small caret from ion-select in ionic4

parrycima
  • 905
  • 8
  • 19