Hey @twestrick!
Gotta say, I’m super impressed with that. A few small changes, and it’s pretty much perfect in your stackblitz example.
When I went to implement it in my Angular component, there seem to be several important differences which are interesting…
- I had to change this code in order for it to apply. Appears that the structure of my ion-input is different to yours!? Or some subtle differences are affecting how the style gets applied.
.threshold-input {
text-align: right;
font-size: 20px;
line-height: 24px;
height: 22px;
}
-
But while the font size etc worked, the height had no effect. After some intensive fiddling, I stumbled upon the fact that I could increase the height, but not decrease it. Which made me wonder whether there was a min-height applied somewhere in the guts of the component. So I tried adding
min-height: 22px;and the height changed!!! -
This style makes no difference for me:
.threshold-input .native-wrapper {
align-items: end;
}
Seems likely that also a result of different internal structure.
Conclusion
There appear to be some inconsistencies in the components I’m getting out of the box and what you are. I notice that you are at V8, whereas I’m still V7. Seems likely that this is relevant!
While I assume the documented CSS Custom Properties will (mostly) work, it seems that any styles that go into the component are likely to result in brittle code that will not survive a migration to a newer version of Ionic!
And the process of battling through these challenges is time consuming to the extreme!