CODEWITHSUNDEEP
ionic-framework
John3136
John3136

Reputation: 29266

ionic grid force row to be visible

I've got a simple ion-grid with about 12 rows in it inside in ion-scroll. 

<ion-scroll style="height: 30vh;" scrollY="true">
  <ion-grid>
    <ion-row *ngFor="let item of allItems; let si = index" [style.background-color]="si === selectedRow ? '#cccccc' : ''">
      <ion-col col-2>{{item.text}}</ion-col>
    </ion-row>
  </ion-grid>
</ion-scroll>

I've got some buttons with a callback that sets selectedRow. Through the magic of data binding when I click a button the right row gets highlighted (yay).

What I want is to force the ion-scroll to scroll the highlighted row into view.

Upvotes: 1

Views: 330

Answers (1)

John3136
John3136

Reputation: 29266

I've found a solution.

In the html template give the row an id:

<div ion-row *ngFor="let row of all_data_rows; let idx= index" id="{{'row_' + idx}}">

Then in the .ts where i programmatically set the row I want visible:

let row = document.getElementById("row_" + this.selectedRow)
row.scrollIntoView()

It ensures the row selected is at the top of the scroll viewport which is probably a bit more scrolling than I wanted but it works. Passing false to scrollIntoView() tries to put the row at the bottom of the viewport which looks a lot better in my case since it causes less scrolling.

Upvotes: 1

Related Questions