Interactive forms are not rendered properly

[TomasAtrat]

When uploading a pdf file with an interactive form, the inputs are not loaded where should be, but below the document, as shown in the picture.

[paodb]

Since version 2.6.0 you can use pdfViewer.setRenderInteractiveForms(false);

[TomasAtrat]

Yes, I've tried it, but actually my use case needs the inputs to fill the form :(

[dex-ds]

Is there a chance to get fixed this soon?
With Vaadin 24.7 we use 4.1.0. => setRenderInteractiveForms(false) does... nothing.
Maybe a little sponsorship could speed things up?

[paodb]

Hello @dex-ds. Yes, sponsorship would be a better way to go.

VCF components are typically developed based on customer requests and sponsorship. While they're open-source and available to everyone, they aren't maintained on a regular schedule. Fixes and updates usually happen when there's a sponsored request.

If your organization has an active Vaadin subscription, you can submit a request via the Support Portal to have the issue reviewed by the team.

[joelpop]

I have a workaround for this issue for Flow (Java). It looks like some of the Lumo and/or Material theme CSS leaked into this component. Paste the following CSS into a file named vcf-pdf-viewer.css and drop it in your frontend/themes/{theme-name}/components/ folder:

:host #viewer div.annotationLayer {
    --pdf-annotation-layer-shift-y: 16px;
    --pdf-annotation-layer-shift-x: var(--pdf-annotation-layer-shift-y);
    --pdf-checkbox-nudge-y: -0.125px;
    --pdf-checkbox-nudge-x: var(--pdf-checkbox-nudge-y);
}

/* === Overlay anchoring (let PDF.js size; only offset the annotation layer) === */
:host #viewer div.annotationLayer {
    position: absolute;
    top: var(--pdf-annotation-layer-shift-y);
    left: var(--pdf-annotation-layer-shift-x);
}

/* Ensure per-annotation boxes honor PDF.js inline left/top/transform */
:host #viewer div.annotationLayer section {
    position: absolute;
}

/* === Text, textarea, select: fill box; let PDF.js font-size stand === */
:host #viewer div.annotationLayer section.textWidgetAnnotation input,
:host #viewer div.annotationLayer section.textWidgetAnnotation textarea,
:host #viewer div.annotationLayer section.choiceWidgetAnnotation select {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    vertical-align: top;
}

/* Remove native chrome that inflates <select> metric, but reserve space for a down triangle */
:host #viewer div.annotationLayer section.choiceWidgetAnnotation select {
    /* still absolutely positioned & filling the section from your rules */
    padding-right: 12px;     /* reserve space for the arrow */
    appearance: none;        /* keep, for predictable metrics */
    -webkit-appearance: none;
}

/* Draw a lightweight arrow using borders inside the section box */
:host #viewer div.annotationLayer section.choiceWidgetAnnotation::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* triangle down */
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;
}

/* Checkbox/radio: fill the annotation box exactly */
:host #viewer div.annotationLayer section.buttonWidgetAnnotation input[type="checkbox"],
:host #viewer div.annotationLayer section.buttonWidgetAnnotation input[type="radio"] {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    background: transparent;
    appearance: none;
    line-height: 0; /* avoid baseline quirks */
}

/* Draw the square outline INSIDE the box and allow a tiny nudge */
:host #viewer div.annotationLayer section.buttonWidgetAnnotation input[type="checkbox"]::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    transform: translate(var(--pdf-checkbox-nudge-x, 0), var(--pdf-checkbox-nudge-y, 0));
}

/* Fill for the checked state; keep it centered and move with the outline */
:host #viewer div.annotationLayer section.buttonWidgetAnnotation input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: currentColor;
    transform: translate(var(--pdf-checkbox-nudge-x, 0), var(--pdf-checkbox-nudge-y, 0));
}

/* fix focus outline offset and shape */
:host #viewer div.annotationLayer section.textWidgetAnnotation input:focus,
:host #viewer div.annotationLayer section.textWidgetAnnotation textarea:focus,
:host #viewer div.annotationLayer section.choiceWidgetAnnotation select:focus,
:host #viewer div.annotationLayer section.buttonWidgetAnnotation input[type="checkbox"]:focus,
:host #viewer div.annotationLayer section.buttonWidgetAnnotation input[type="radio"]:focus {
    border-radius: 0;
    outline-offset: -1px;
}

[joelpop]

Here is a screenshot of the example form using the above CSS. Note that instead of the normal appearance of the form fields overlaying/obscuring the document's textLayer, the textLayer's input blank is used instead.