"textarea" html Feld mitwachsen?

2 Antworten

<textarea class="form-control" name="Adresse" rows="auto">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Du kannst auch die Mindesthöhe des Textarea-Felds definieren. Das bedeutet, dass das Textarea-Feld immer mindestens so hoch sein wird, wie der angegebene Wert.

<textarea class="form-control" name="Adresse" rows="auto" min-height="50">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>


Woher ich das weiß:Hobby – Programmierer

maetin944 
Beitragsersteller
 14.12.2023, 10:01

aber so ein Scrollbalken kommt trozdem

JulianOnFire  14.12.2023, 10:20
@maetin944

wenn du den text auf der Webseite selbst eingeben willst, würde es so gehen ;

<!DOCTYPE html>
<html>
<head>
    <style>
        textarea.auto-expand {
            overflow-y: hidden; 
            resize: none; 
            min-height: 50px; 
        }
    </style>
</head>
<body>


<textarea class="auto-expand" id="expanding-textarea"></textarea>


<script>
    document.getElementById('expanding-textarea').addEventListener('input', function() {
        this.style.height = 'auto'; 
        this.style.height = (this.scrollHeight) + 'px'; 
    });
</script>


</body>
</html>

wenn du den text vorab mitgeben willst dann so:

<!DOCTYPE html>
<html>
<head>
    <style>
        textarea.auto-expand {
            overflow-y: hidden; 
            resize: none; 
            min-height: 50px; 
        }
    </style>
</head>
<body>


<textarea class="auto-expand" id="expanding-textarea">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</textarea>


<script>
    function adjustTextareaHeight(textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';
    }


    const textarea = document.getElementById('expanding-textarea');
    adjustTextareaHeight(textarea);


    textarea.addEventListener('input', function() {
        adjustTextareaHeight(this);
    });
</script>


</body>
</html>


Ich habe für diesen Zweck immer Autosize (stand-alone) verwendet.

Woher ich das weiß:Berufserfahrung – IT Autodidakt & DAU-Proofed als PC-Flittchen