angular2 [innerHTML] not working properly with ionic <ion-list>

Question

I am using ionic 3 and angular 2 and I have ran into a problem with [innerHTML] styling a big html string. While it is working fine in a div tag standing alone, it cuts off the string at the end of the screen istead of going to the next line when in an ion-list tag. Any idea why is this happening? Images and code below: Within a div tag. Withing an ion-list tag

Html file with div tag

  <button (click)="this.getSchoolInfo(16329)" > Load string </button>
  <div [innerHTML] = "test"> </div>

Html file with ion-list tag

<ion-list-header> Σχολές </ion-list-header>
<ion-item *ngFor="let i of schools" (click)="toggleDetails(i.school)">
  <b>{{i.school.title}}</b><br>


  <div class="info" *ngIf="i.school.showDetails" [innerHTML]="test"></div>

</ion-item>

Big string at .ts file

  this.test = "<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbgggggggggggggggggggggggggggggggggg</p>"

I'd suggest you inspect the styles in chrome devtools and disable them until you find out which one causes it, and then overrule this style from your code. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 4, 2017 at 10:37
Probably the ion-item has a css rule of text-overflow: hidden; or something like that — devqon
– devqon, Commented Sep 4, 2017 at 10:41
Why do you use innerHTML and not {{test}} or ionic not able to resolve that? — Max
– Max, Commented Sep 4, 2017 at 11:08

rahul patel · Accepted Answer · 2017-09-04 11:20:51Z

2

I think your problem is related to text-wrap class. I am also facing this problem. here is my code. You can be modified according to your need.

syntax with **text-wrap**

<ion-list text-wrap *ngFor="let post of newsData">
<hr>
<ion-item (click)="NewsDetailsPage(post.news_id);" detail-push>

<ion-thumbnail item-start>
  <img [src]="post.news_photo">
</ion-thumbnail>
<h2>{{post.news_heading}}</h2>
<div><p style="float: left; font-weight: normal; font-size: 12px;"> {{post.news_location}}</p>
<p style="float: right; margin-top: 1%; font-weight: normal;  font-size: 12px;">{{post.news_date | date: 'dd/MM/yyyy' }}</p></div>

</ion-item>
</ion-list>

Output:

Without **text-wrap** the output is like that:

I hope this will help you.

answered Sep 4, 2017 at 11:20

rahul patel

4342 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular2 [innerHTML] not working properly with ionic <ion-list>

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related