I'm not able to get React wrapper for Ionic render IonLabel (JSX) with floating position

Good afternoon everyone, would you please be able to provide me with some guidance?
I’m following Maximilian Schwarzmuller’s courses and when writing the following:
IonLabel position=“floating”
I get this:
It fails to float!
The following, for example, works:
IonLabel position=“fixed”
giving the following:
The following works too:
IonLabel position=“stacked”
giving the following:

Not exactly sure what the issue you are having is. Some sample code reproducing the issue would be great. A StackBlitz is preferred. The easiest is to fork an Ionic example and then change it to reproduce your issue.

First, that is not a working example that someone can test with. Second, using IonLabel is the old syntax that was deprecated in Ionic 7.

A floating label works in Ionic’s example. Without a reproducible working example of your issue, it is hard to know what your issue is and be able to offer help.

1 Like

Great! Thanks a lot! Would you mind giving me some hint on how to put that dynamic string (see curly braces) into this new syntax?
{calcUnits === “mkg” ? “meters” : “feet”}

I don’t use React, but with a little Googling and playing with an Ionic example, I figured it out for you.

<IonInput label={calcUnits === 'mkg' ? 'meters' : 'feet'} labelPlacement="fixed"></IonInput>

Great! Thanks a lot for your kind help!
By the way, I don’t want to steal your time, but what JS framework are you using and in what do you prefer it over React? I’m asking because I’m deciding which path to go.

1 Like

I use Vue with TypeScript. I started with Vue back in like 2015? Back then at least, it had an easier learning curve and probably still does. I think reactivity is a lot simpler? I’ve never used React or Angular so I am biased :smile: