Add word-wrap to labelPlacement in ionic 7 ion-radio, ion-textarea, etc

Ionic Framework
1

If you were to use,

  <ion-textarea class= 'custom" label="Outline textarea and add some more text here like this" labelPlacement="floating"fill="outline" placeholder="Enter text"></ion-textarea>

the label will be cut off. I noted any where in v7 if you use label=“” you cannot add very much text. attempting to edit css with

ion-textarea.custom {
  --white-space: normal !important;
  --padding-end: 10px;
  --padding-start: 10px;
  --placeholder-opacity: 1.0;
}

Just as an example can edit the css, but it will not add a word-wrap and of course class=“ion-text-wrap” has no effect. Is it possible to add text-wrap outside of going back to using ion-labels?

2

I wonder if you can inspect the floating label for it’s ion classes and append some styles to that class. However if that doesn’t work, my guess is Ionic would have to treat it similar to changing the counter styles, with another directive for label properties or exposed css vars

3

Yes it looks like it is baked in and really cannot seem to touch it. I would have to say ionic 7 has some great features, but labels in textarea and radio buttons are not ready for real world forms. the legacy labels still works for this version so I will not have to have to go back to version 6

4

I was able to target the label for a textarea. For a radio, I couldn’t figure it out so wrapped the label text in a span. The textarea could use some additional tweaks with spacing but the concept is there.

1 Like
5

Might be worth a feature request on the GitHub if it’s something maybe they hadn’t considered yet with the new ion-input

2 Likes
6

The answer for radio buttons works very well, but the code for textarea does not work across some Android devices. To be fair to the answer the new textarea is very buggy and does does not always render properly on Android devices and can fail from opening and closing pages on an iOS device.

7

I had the same problem with ion-radio and ion-toggle. I succeeded in fixing it by placing a span with class ion-text-wrap in the item. E.g.:

<ion-toggle>
    <span class="ion-text-wrap">Very long text</span>
</ion-toggle>

<ion-radio>
  <span class="ion-text-wrap">Very long text</span>
</ion-radio>
3 Likes