Issues with ion-text-wrap

@ionic/angular”: “4.8.1”,
@angular/core”: “7.2.2”

Hi all,

I have troubles with form labels that contain longer texts. Take the following example:

<ion-list>

  <ion-list-header>
	<ion-text>DummyList</ion-text>
  </ion-list-header>

  <ion-item>
	<ion-label position="floating" class="ion-text-wrap">
	  Lorem ipsum dolor, sit amet consectetur adipisicing elit. In iste fuga reiciendis ullam quibusdam
	  voluptates sed quod, odit totam, suscipit atque modi officia nostrum rem eaque tenetur dolore consequuntur nesciunt?
	</ion-label>
	<ion-input type="text"></ion-input>
  </ion-item>

</ion-list>

Here is what it looks like without focus:
2019-10-30_09h02_47
Please note the truncated text and the immense space between the title and the label.

Here is what it looks like with focus:
2019-10-30_09h03_12
Please note the misalignment and overlapping text.

Other positions like “stacked” also misbehave.

Any help will be greatly appreciated.
~Chris

1 Like

I doubt floating and wrap will work well together?

Seems so, yea. And other positions like “stacked” don’t work properly either. I can’t guarantee that the user defined questions are short enough for the labels. And ellipsis “…” are not an option without any ability to see the full text.

Maybe you could check if the question is more than a certain length, and if so have a button that presents an overlay such as an ActionSheet containing the whole text?

Sure, I can override styles and add custom buttons etc. But wouldn’t it be better to fix the ionic component library? I imagine that truncated texts are pretty common issues.

Here is another example with ion-select using interface=“alert”:
2019-10-31_08h38_16

using a hacky workaround in globals.css:

.alert-tappable.alert-radio {
  height: auto;
  contain: content;
}

.alert-radio-label.sc-ion-alert-md,
.alert-radio-label.sc-ion-alert-ios {
  white-space: normal;
}

2019-10-31_08h56_39

The same ion-select with interface=“action-sheet” under mode=“ios”:
2019-10-31_08h36_42

It’s really a UI design question. If you can come up with a reasonable way of presenting a wordy prompt, in html, then you can apply that to an Ionic app.

Maybe have a short text prompt, with a popup to display the full text???

It’s my first webbased frontend project. I may not be experienced enough to contribute a clean solution here as I’m seeking for help myself.

The above mentioned workaround indicates that it should be solvable via css. (height: auto; contain: content; white-space: normal)…

Every displayed text should have two modes in my opinion:

  1. ellipsis “…”
  2. text-wrap which should let the text container grow vertically

There are quite a few examples of Show more… buttons in Ionic. This one by @rapropos, for example…

Thank you for your answer. Unfortunately those are custom components which break consistency with other forms that already use ion-select, floating ion-label etc. I was hoping for a solution that would let me keep ionic components. It seems like custom components are the only option if ionic doesn’t offer the desired behaviour :frowning:

I was facing the same issue on ionic 5.
Here is a workaround that worked for me:

ion-label.label-floating{
  transform: translate3d(0,  0,  0) scale(0.75) !important;
}