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

Ionic Framework Ionic React
1

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:
sssssss
It fails to float!
The following, for example, works:
IonLabel position=“fixed”
giving the following:
image
The following works too:
IonLabel position=“stacked”
giving the following:
image

2

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.

3

image
image804×157 5.48 KB

4

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
5

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”}

6

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>
7

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
8

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: