search

Merott / nativescript-pdf-view

A basic PDF viewer plugin for NativeScript. Now maintained by @madmas: github.com/madmas/nativescript-pdf-view
Other
32 stars 35 forks source link

Pdf Becomes Gray when switching between tabs in TabView #37

Open AliKalkandelen opened 5 years ago

AliKalkandelen commented 5 years ago

Hello,

Im using a tabview in a page and the Pdf is in one tab and the details of the invoice are in the other tab. ONLY on ios the pdf shows, but when i switch tabs and go back to the pdf the pdf screen is just a gray background you cant see the pdf.

Repro Steps: 1)Open Invoice

2) Click on Details Tab

3)Click back on Invoice Tab

The HTML ↓↓↓↓↓↓↓

<Shared-ActionBar [pageTitle]='"Invoice #: " + invoiceID'></Shared-ActionBar>

<TabView selectedTabTextColor="#012d6b" id="tabViewContainer" androidTabsPosition="bottom" androidSelectedTabHighlightColor="#012d6b">
        <StackLayout *tabItem="{title: 'PDF', iconSource: 'res://pdf'}">
                <FlexboxLayout>
                                <Button text="Approve" class="font-awesome btn btn-secondary pull-left" (tap)="showModal('approving')" icon="~/images/check.png"></Button>
                                <Button text="Reject"  class="font-awesome btn btn-secondary pull-right"(tap)="showModal('rejecting')" ></Button>
                </FlexboxLayout>
                <ActivityIndicator [busy]="_app.isLoading" *ngIf="_app.isLoading" width="100" height="100" class="activity-indicator" horizontalAlignment="center"
            verticalAlignment="center"></ActivityIndicator>
                <PDFView *ngIf="!_app.isLoading"  [src]="pdfUrl"></PDFView>
        </StackLayout>
        <FlexboxLayout *tabItem="{title: 'Invoice Details', iconSource: 'res://details'}">             
                <GridLayout rows="auto, auto, auto, auto, auto, auto" columns="auto, auto">
                    <Label text="Department: " class="h3" row="0" col="0"></Label>
                    <Label [text]="invoiceDetails.Department_Text" class="h3" row="0" col="1"></Label>
                    <Label text="Location: " class="h3" row="1" col="0"></Label>
                    <Label [text]="invoiceDetails.Location_Text" class="h3" row="1" col="1" textWrap="true"></Label>
                    <Label text="Expense Code: " class="h3" row="2" col="0"></Label>
                    <Label [text]="invoiceDetails.Expense_Text" class="h3" row="2" col="1"></Label>
                    <Label text="Amount: " class="h3" row="3" col="0"></Label>
                    <Label [text]="invoiceDetails.Invoice_Details_Amount.toFixed(2)" class="h3" row="3" col="1"></Label>
                    <Label text="Tax: " class="h3" row="4" col="0"></Label>
                    <Label [text]="invoiceDetails.Invoice_Details_Tax" class="h3" row="4" col="1"></Label>
                    <Label text="Subtotal: " class="h3" row="5" col="0"></Label>
                    <Label [text]="invoiceDetails.Subtotal" class="h3" row="5" col="1"></Label>
                </GridLayout>
        </FlexboxLayout>
</TabView>
afaridanquah commented 5 years ago

Having the same issue with tabs. Did you figure out a workaround?

AliKalkandelen commented 5 years ago

No unfortunately i haven't found a fix yet

On Wed, Jan 16, 2019 at 2:55 PM afaridanquah notifications@github.com wrote:

Having the same issue with tabs. Did you figure out a workaround?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Merott/nativescript-pdf-view/issues/37#issuecomment-454917375, or mute the thread https://github.com/notifications/unsubscribe-auth/AIP0ZEKnbTzJZuNp8ISvy7i2yu05u_Z5ks5vD4OkgaJpZM4Z4M4V .

-- -"I would love to change the world, but they won't give me the source code"

afaridanquah commented 5 years ago

Found a workaround for it. I passed a key to the component and bind it to a random number. So anytime you click on a tab i generate a random number and pass it as a prop to the component that renders the pdf. Not sure if its the right approach but did the charm.

See below

<PDFView v-show="selectedEvent.agenda && selectedEvent.agenda.filename" row="0" :src="pdfSrc" @load="endLoading" :key="jumperKey">

afaridanquah commented 5 years ago

@AliKalkandelen noticed you just reopened the issue. Did it not work in your case?

AliKalkandelen commented 5 years ago

@AliKalkandelen noticed you just reopened the issue. Did it not work in your case?

Yes it didnt work. maybe i didnt understand it exactly, could you elaborate on what you did? And im using Angular not vue so there might be a difference

abahrisd commented 5 years ago

I have same issue. For angular found this workaround:

`constructor( ... private cdr: ChangeDetectorRef, ... ) { }

ngOnInit() { this.page.on('loaded', (data) => { let oldPdfSrc = this.pdfSrc; this.pdfSrc = undefined; this.cdr.detectChanges(); this.pdfSrc = oldPdfSrc; this.cdr.detectChanges(); }); }`