0

just a quick question. I'm developing an app with Ionic 3.20.0. Everything is working fine except this tiny little issue with the scrollbars.

For starters I have set overflow:hidden; on my ion-content in my app.scss file and it does exactly what it should: not scroll the content which includes my ion-card.

Inside my ion-card i have two sections: one with fixed content (<div class="search-card">...</div>) at the top and the second one is a list of rows that are scrollable(<div class="scroll"> ...</div>). which would look like this in code: 

   <ion-content class="no-scroll">
<ion-card>
        <back-button></back-button>
        <div class="search-card">
            <ion-row class="heading-row" padding>
                <ion-col col-12 class="heading-row" text-left>
                    <ion-searchbar placeholder="Nach Name / Firma suchen" debounce="500" showCancelButton="false" color="red" (ionInput)="searchbarInputChanges($event)"></ion-searchbar>
                </ion-col>
            </ion-row>
            <ion-row class="overview-header no-scroll" padding-left>
                <ion-col col-1>Status</ion-col>
                <ion-col col-1>Anrede</ion-col>
                <ion-col col-2>Nachname</ion-col>
                <ion-col col-2>Vorname</ion-col>
                <ion-col col-2>Unternehmen</ion-col>
                <ion-col col-2> Telefon </ion-col>
                <ion-col col-2>E-Mail</ion-col>
            </ion-row>
        </div>
        <div class="scroll">
            <ion-item *ngIf="!getClientCustomers()" text-center class="no-data-notification">
                <ion-icon name="information-circle"></ion-icon><br> Zur Zeit sind noch keine Leads vorhanden.
            </ion-item>

            <div *ngIf="getClientCustomers()" >
                <ion-row class="overview-content" align-items-center *ngFor="let clientCustomer of getClientCustomers()">
                    <ion-col col-1>
                        <span *ngIf="clientCustomer.applicant == 1">Interessent</span>
                        <span *ngIf="clientCustomer.applicant == 0">Kunde</span>
                    </ion-col>
                    <ion-col col-12 col-md-1>
                        <span *ngIf="clientCustomer.gender=='f'">Frau</span>
                        <span *ngIf="clientCustomer.gender=='m'">Herr</span>
                    </ion-col>
                    <ion-col col-12 col-md-2 class="lastname">
                        <a (click)="openLead(clientCustomer)">{{clientCustomer.lastname}}</a>
                    </ion-col>
                    <ion-col col-12 col-md-2>
                        <a (click)="openLead(clientCustomer)">{{clientCustomer.firstname}}</a>
                    </ion-col>
                    <ion-col col-12 col-md-2>{{clientCustomer.company}}</ion-col>
                    <ion-col col-2>{{clientCustomer.phone}}</ion-col>
                    <ion-col col-2>{{clientCustomer.email}}</ion-col>
                </ion-row>
            </div>
        </div>
    </ion-card>
</ion-content>

SCSS: 

    no-scroll .scroll-content {
        overflow: hidden;
        .scroll {
            overflow-y: scroll!important;
            height: 79%!important;
            padding: 0 2%;
         }

    }

When opening the app on my tablet the scrolling works but the scrollbars are not showing. I need them to be visible since there are over 400 rows when my data is loaded and i need to see where i'm currently at inside the data.

I tried to set the overflow differently but to no avail. Has anyone a thought or solution for this? If you need more information please ask.

Thanks a lot

Bexx
  • 47
  • 1
  • 10
  • Aren't scrollbars device-dependent? You should be able to see the scrollbar while scrolling, but on many mobile devices it fades away to maximize viewport real estate. I think you might have to use a plugin to achieve your desired effect on mobile. Here's a similar question: https://stackoverflow.com/questions/22907777/make-scrollbar-visible-in-mobile-browsers – Sean May 08 '18 at 14:51

1 Answers1

0

I just found the answer. I dunno if it will help anybody but this is what i did.

I added this to the end of my app.scss

::-webkit-scrollbar {
    width: 12px !important;
}
/* Track */
::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: color($colors,orange) !important;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #41617D !important;
}
.full-height {
    height: 100%;
}

and this is the markup for my scrolling part 

<ion-scroll scrollY="true"  class="scroll full-height">
            <ion-item *ngIf="!getClientCustomers()" text-center class="no-data-notification">
                <ion-icon name="information-circle"></ion-icon><br> Zur Zeit sind noch keine Leads vorhanden.
            </ion-item>
            <div *ngIf="getClientCustomers()">
                <ion-row class="overview-content" align-items-center *ngFor="let clientCustomer of getClientCustomers()">
                    <ion-col col-1>
                        <span *ngIf="clientCustomer.applicant == 1">Interessent</span>
                        <span *ngIf="clientCustomer.applicant == 0">Kunde</span>
                    </ion-col>
                    <ion-col col-12 col-md-1>
                        <span *ngIf="clientCustomer.gender=='f'">Frau</span>
                        <span *ngIf="clientCustomer.gender=='m'">Herr</span>
                    </ion-col>
                    <ion-col col-12 col-md-2 class="lastname">
                        <a (click)="openLead(clientCustomer)">{{clientCustomer.lastname}}</a>
                    </ion-col>
                    <ion-col col-12 col-md-2>
                        <a (click)="openLead(clientCustomer)">{{clientCustomer.firstname}}</a>
                    </ion-col>
                    <ion-col col-12 col-md-3>{{clientCustomer.company}}</ion-col>
                    <ion-col col-3>{{clientCustomer.email}}</ion-col>
                </ion-row>
            </div>
        </ion-scroll>
Bexx
  • 47
  • 1
  • 10