How to turn off the "Alt Text AI Model" dialog?

[ManuelRauber]

Hi!

I've updated to 22.1.0 and after that, I get this thing popping up when viewing a PDF:

I've looked through the online changelog but I cannot find anything that introduces it, also I've not been able to find something to turn it off.

How can I turn that off?

Some more context:

 <ngx-extended-pdf-viewer
        [class.show-find-button]="showFindButton"
        [src]="src"
        [language]="language"
        [sidebarVisible]="enableSidebar"
        [showToolbar]="showToolbar"
        [showSidebarButton]="showSidebarButton"
        [showFindButton]="showFindButton"
        [showPagingButtons]="showPagingButtons"
        [showDrawEditor]="showDrawEditor"
        [showTextEditor]="showTextEditor"
        [showZoomButtons]="showZoomButtons"
        [showPresentationModeButton]="showPresentationModeButton"
        [showOpenFileButton]="showOpenFileButton"
        [showPrintButton]="showPrintButton"
        [showDownloadButton]="showDownloadButton"
        [showSecondaryToolbarButton]="showSecondaryToolbarButton"
        [showRotateButton]="showRotateButton"
        [showHandToolButton]="showHandToolButton"
        [showScrollingButtons]="showScrollingButtons"
        [showSpreadButton]="showSpreadButton"
        [showPropertiesButton]="showPropertiesButton"
        [showStampEditor]="showStampButton"
        [showHighlightEditor]="showHighlightEditor"
        [showUnverifiedSignatures]="showUnverifiedSignatures"
        [logLevel]="VerbosityLevel.ERRORS"
        [zoom]="zoom"
        (zoomChange)="zoomChange($event)"
        [theme]="theme"
        [backgroundColor]="'transparent'"></ngx-extended-pdf-viewer>

// Component:
    @Input() enableSidebar = false;
    @Input() showToolbar = true;
    @Input() showSidebarButton = true;
    @Input() showFindButton = false;
    @Input() showPagingButtons = true;
    @Input() showDrawEditor = false;
    @Input() showTextEditor = false;
    @Input() showZoomButtons = true;
    @Input() showPresentationModeButton = true;
    @Input() showOpenFileButton = false;
    @Input() showPrintButton = false;
    @Input() showDownloadButton = false;
    @Input() showSecondaryToolbarButton = false;
    @Input() showRotateButton = false;
    @Input() showHandToolButton = false;
    @Input() showScrollingButtons = false;
    @Input() showSpreadButton = false;
    @Input() showPropertiesButton = false;
    @Input() showStampButton = false;
    @Input() showHighlightEditor = false;
    @Input() showUnverifiedSignatures = true;

None of the inputs are overridden.
Within my component, I do not interact with any of the available APIs.

The use case is just viewing a PDF, not interacting with it.

[stephanrauh]

Fun fact: I've seen this dialog in the source code, but I don't know how to display it.

I suspect your CSS code overrides a CSS rule responsible for hiding the dialog.

[ManuelRauber]

Fun fact: I've seen this dialog in the source code, but I don't know how to display it.

What do you mean by that? That dialog is in your code base.

We see it on all PDFs we're opening; it could be a blank one created in Word.

I suspect your CSS code overrides a CSS rule responsible for hiding the dialog.

Probably. For testing, I've deleted that dialog in the devtools and all the other dialogs are there as well:

I guess that there was some breaking change for me when I updated from 22.0.0-alpha.11 to 22.1.0

[stephanrauh]

The dialog may be in my code base, but basically I've inherited it from pdf.js. I just copied it in order to avoid NullpointerExceptions.

Yes, your screenshot indicates a CSS problem. Strange - I didn't expect that.

[ManuelRauber]

The dialog may be in my code base, but basically I've inherited it from pdf.js. I just copied it in order to avoid NullpointerExceptions.

Yes, you screenshot indicates a CSS problem. Strange - I didn't expect that.

You're right.

In our project, there is a simple CSS rule:

.dialog { display: flex; }

And the code you copied from PDF.js uses a class called dialog.

ngx-extended-pdf-viewer/projects/ngx-extended-pdf-viewer/src/lib/pdf-dialog/pdf-alt-text-dialog/pdf-alt-text-dialog.component.html

Line 1 in 9e0a79b

<dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">

It's just a coincidence.
I didn't check for CSS, because I though it's some native dialog from the library. 🤦

Thank you for opening my eyes!

[ManuelRauber]

One more info: In 22.0.0-alpha.11 the dialogs did not use a dialog CSS class. :-)
It was changed in this commit

[stephanrauh]

I could add this CSS rule:

ngx-extended-pdf-viewer {
  .dialog {
    display: initial;
  }
}

It's a special case, but my gut feeling is you're not the only developer out there using a dialog class, so maybe resetting makes sense. What's your opinion? Should I do it, and does the initial setting do the trick?

[ManuelRauber]

I could add this CSS rule:

ngx-extended-pdf-viewer {
  .dialog {
    display: initial;
  }
}

It's a special case, but my gut feeling is you're not the only developer out there using a dialog class, so maybe resetting makes sense. What's your opinion? Should I do it, and does the initial setting do the trick?

Hm, both solutions (keep it or reset it) are valid. It may should at least be added to the docs why it happens and what one can do about it.

I did not check regarding initial, I just replaced it with display: hidden.