CODEWITHSUNDEEP
javascripthtmlcssionic-frameworkion-scroll
LucaSarge
LucaSarge

Reputation: 31

Ionic ion-scroll with fixed elements

I have this template for a component.

I have to fix the first row and the first column. The application is a planning and I have to keep still the first column that is composed of the rooms and the first row that are the days.

I can not just lock the position because the first column can scroll vertically and the first row horizontally.

Any help?

<ion-scroll #calendar id="calendar" scrollX="true" scrollY="true" class="item" (ionScroll)="scrollHandler($event)">
<div class="calendarComponent">
    <ion-row class="calendarDaysRow" nowrap>
        <ion-col class = "day" *ngFor="let day of calendarDays">
            {{day.toDateString().split(" ")[0] + " " + day.toDateString().split(" ")[1] + " " + day.toDateString().split(" ")[2]}}
        </ion-col>
    </ion-row>

    <ion-row  class="calendarRow" *ngFor="let room of roomsList" nowrap>
        <ion-col class="room">{{room.getName()}}</ion-col>
        <ion-col class="dayInfo" *ngFor="let day of calendarDays" >
            <calendarPageComponentElement [room]="room" [day]="day" [reservations]="getRoomDayReservation(day,room)"></calendarPageComponentElement>
        </ion-col>
    </ion-row>
</div>

Upvotes: 1

Views: 147

Answers (0)

Related Questions