Полоса прокрутки не отображается на планшете - PullRequest
Новая
       8

Полоса прокрутки не отображается на планшете

0 голосов
/ 08 мая 2018

просто быстрый вопрос. Я разрабатываю приложение с Ionic 3.20.0. Все работает нормально, кроме этой маленькой проблемы с полосами прокрутки.

Для начала я установил overflow:hidden; на моем ion-content в моем app.scss файле, и он делает именно то, что должен: не прокручивать содержимое, которое включает в себя мой ion-card.

Внутри моего ion-card у меня есть две секции: одна с фиксированным содержимым (<div class="search-card">...</div>) вверху, а вторая - список строк с возможностью прокрутки (<div class="scroll"> ...</div>). который будет выглядеть так в коде: 

   <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%;
         }

    }

При открытии приложения на моем планшете прокрутка работает, но полосы прокрутки не отображаются. Мне нужно, чтобы они были видны, так как при загрузке моих данных более 400 строк, и мне нужно увидеть, где я сейчас нахожусь внутри данных.

Я пытался установить переполнение по-другому, но безрезультатно. Кто-нибудь думал или решение для этого? Если вам нужна дополнительная информация, пожалуйста, спросите.

Большое спасибо

1 Ответ

0 голосов
/ 09 мая 2018

Я только что нашел ответ. Не знаю, поможет ли это кому-нибудь, но это то, что я сделал.

Я добавил это в конец моего 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%;
}

и это разметка для моей прокрутки 

<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>
...