Formular pdf Ausgabe - Eingabefelder lassen sich nicht vertikal mittig ausrichten

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich habe vor einiger Zeit hier schon einmal richtig gute Hilfe erhalten und bin guter Hoffnung.
Ich habe ein Formular gebaut (für dieses Forum extrem reduziert) und möchte dort Felder mit Texten und Datumsangaben füllen. Funktioniert alles super. Danach gebe ich dies aber als ein pdf Dokument aus.
Und jetzt jetzt kommts: Alle auszufüllenden Felder kleben am oberen Rand. Im Browser alles noch hübsch. In der PDF Schrott.

Ich habe den Code versucht so gering wie möglich zu halten, bin leider nur Gelegenheits-HTMLer. Bitte um Nachsicht!
Habe schon mit einigen Styleanpassungen rumgebastelt:
[ul]
[li]style=„vertical-align: middle;“[/li][li]document.getElementById(‚…‘).style.verticalAlign = ‚middle‘[/li][li]document.querySelector(‚…‘).style.verticalAlign = ‚middle‘[/li][li]document.querySelector(‚‘).classList.add(‚vertical-center‘)[/li][/ul]
Brachte alles nix??? Was mach ich falsch? Hat jemand eine Idee? Vielen Dank schonmal für die Mühen …

[CODE]

<title>Formular_Auftrag_Ausschreibung</title>
<style>

    .table-container {
        margin-top: 20px;                         
        margin-left: 120px;
        margin-right: 100px;
    }
    table {
           border-collapse: collapse;
           border: none;
    }
    th, td {
        border: 1px solid;                             
        padding: 4px;
        text-align: left;
        vertical-align: middle;
    }
    tr {
        vertical-align: middle;
    }
    .normaltext {
        text-align: left;
        font-size: 18px;
        color: black;
        font-weight: normal;
    }
    .normaltext_fett {
        color: black;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
    }
    .textklein {
        color: black;
        font-size: 12px;
    }
    .no-border {
        border: 1px solid;
        background-color: #F5F6CE;
    }
    .input-color {
        color: black;
    }

    .button {
        background-color: green;
        border-color: white;
        color: white;
        font-size: 16px;
    }

</style>

    <table>
        <tr>
            <td colspan="11" class="normaltext_fett">Genehmigung:</td>
        </tr>
        <tr>
            <td class="normaltext" >Text:</td>
            <td class="normaltext" style="text-align:right">1.</td>
            <td id="td_1_firma" > <input class="normaltext no-border" type="text" name="Firma1" id="firma1" placeholder="" size="50"></td>
        </tr>
        <tr id="Genehmigungsdatum_id_date">
            <td colspan="2"></td>
            <td><input class="normaltext no-border" type="date" name="Genehmigungsdatum_date" id="Genehmigungsdatum_date" ></td>
        </tr>
        <tr id="Genehmigungsdatum_id_text" style="display: none;">
            <td colspan="2"></td>
            <td><input class="normaltext no-border" type="text" name="Genehmigungsdatum_text" id="Genehmigungsdatum_text"></td>
        </tr>               
        <tr>
            <td colspan="11">
                <div id="element-to-hide" data-html2canvas-ignore="true">
                    <button class="button"   type="reset" >Formular leeren</button>
                    <button class="button"   type="submit" id="generatePdf">Formular als PDF drucken</button>
                </div>
            </td>
        </tr>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

[/CODE]

2

Hallihallo,
ich habe rausgefunden, dass die Schriftgröße des „normaltext“ im style dieses Phänomen verursacht und habe ein padding-top hinzugefügt. Jetzt geht es so halbwegs. Vielleicht hat doch noch jemand eine andere schönere Lösung für mich? Hier mein neuer Code:

[CODE]

<title>Formular_Auftrag_Ausschreibung</title>
<style>

    .table-container {
        margin-top: 20px;                         
        margin-left: 120px;
        margin-right: 100px;
    }
    table {
           border-collapse: collapse;
           border: none;
    }
    th, td {
        border: 1px solid;                             
        padding: 4px;
        text-align: left;
        vertical-align: middle;
    }
    tr {
        vertical-align: middle;
    }
    .normaltext {
        text-align: left;
        font-size: 18px;
        color: black;
        font-weight: normal;
        padding-top: 10px;
    }
    .normaltext_fett {
        color: black;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        padding-top: 10px;
    }
    .textklein {
        color: black;
        font-size: 12px;
    }
    .no-border {
        border: 1px solid;
        background-color: #F5F6CE;
    }
    .input-color {
        color: black;
    }
    .button {
        background-color: green;
        border-color: white;
        color: white;
        font-size: 16px;
    }
    select {
        border: 1px solid;
        outline: none;
        background-color: #F5F6CE;
        width: 200px;
        padding-top: 10px;
    }
</style>

    <table>
        <tr>
            <td colspan="11" class="normaltext_fett">Genehmigung:</td>
        </tr>
        <tr>
            <td class="normaltext" >Text:</td>
            <td class="normaltext" style="text-align:right">1.</td>
            <td id="td_1_firma" > <input class="normaltext no-border" type="text" name="Firma1" id="firma1" placeholder="" size="50"></td>
        </tr>
        <tr id="Genehmigungsdatum_id_date">
            <td colspan="2"></td>
            <td><input class="normaltext no-border" type="date" name="Genehmigungsdatum_date" id="Genehmigungsdatum_date" ></td>
        </tr>
        <tr id="Genehmigungsdatum_id_text" style="display: none;">
            <td colspan="2"></td>
            <td><input class="normaltext no-border" type="text" name="Genehmigungsdatum_text" id="Genehmigungsdatum_text"></td>
        </tr>               
        <tr>               
            <td colspan="2" class="normaltext_fett">Auswahl:</td>
            <td colspan="9"  >
                <select class="normaltext no-border" id="auswahl">
                    <option value="">bitte wählen</option>
                    <option value="aa">Auswahl A</option>
                    <option value="bb">Auswahl B</option>
                </select>
                <span style="color:white" id="ergebnis"></span>
            </td>
        </tr>   
        <tr>
            <td colspan="11">
                <div id="element-to-hide" data-html2canvas-ignore="true">
                    <button class="button"   type="reset" >Formular leeren</button>
                    <button class="button"   type="submit" id="generatePdf">Formular als PDF drucken</button>
                </div>
            </td>
        </tr>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

[/CODE]

3

Padding ist sicher eine gute Möglichkeit.

Ich habe mal versucht, das mit Flex zu zentrieren und die Abmessungen des main-Containers entspr. einer DIN-A4-Seite gesetzt:

main { width: 210mm; height: 297mm; display: flex; justify-content: center; align-items: center; } Wenn ich dann die Skalierung passend einstelle, ist das Element zentriert.

[CODE] const pdf = new jsPDF(‚p‘, ‚mm‘, [297, 210]);

        pdf.html(document.querySelector('main'), {
            html2canvas: {
                scale: 0.26
            },
            callback: function (pdf) {
                document.getElementById('element-to-hide').style.display = 'block';

                // Rücksetzen der Stile für Datumsfelder
                document.getElementById('Genehmigungsdatum_id_text').style.display = 'none';
                document.getElementById('Genehmigungsdatum_id_date').style = '';

                pdf.save();
            }
        });

[/CODE]Wahrscheinlich musst Du die Abmessungen von main dann ebenfalls dynamisch für die PDF-Ausgabe setzen.

4

Hallo und vielen Dank für die Unterstützung.
Bei der Methode wird zwar das Dokument als solches mittig ausgerichtet, aber nicht die Eingaben in den Inputfeldern. Ich bleibe vorerst bei der padding-top Methode.
Trotzdem DANKE