Die Primefaces Komponente InputTextArea bietet die Möglichkeit, über das Attribut „autoResize“ die Größe mittels JavaScript dynamisch anpassen zu lassen.

<p:inputTextarea autoResize="true" style="width:70%;" />

Problem
Die Berechnung der notwendigen Größe funktioniert leider mit der aktuellen Version 5.1 nur dann korrekt, wenn eine feste Breite für das p:inputTextarea Tag angegeben wird. Wird die Breite in Prozent angegeben, ist die Berechnung der Höhe bzw. die Anzahl der notwendigen Rows fehlerhaft. Dies tritt aber erst ab einem Wert von 51% und mehr wirklich sichtbar auf. Die Anzahl der Rows die nach unten hin zuviel vorhanden sind, ist abhängig von der Länge des Textes und der Breite.

primefaces-inputtextarea-resize-bug

Bereits im Mai 2012 wurden die Entwickler von Primefaces auf dieses Problem (Issue 4015) aufmerksam gemacht. Leider steht das Issue auf den Status „WontFix“, was ich leider nicht ganz nachvollziehen kann.

Lösungsansatz
Es wurde bereits ein inoffizieller Patch im Issue zur Verfügung gestellt. Leider ist dieser nicht mehr ganz mit der aktuellen Primefaces Version 5.1 kompatibel. Zusätzlich wurde vergessen die Mindesthöhe der Textarea zu beachten. Hat eine Textarea noch keinen Inhalt oder braucht der Inhalt weniger Platz als die Mindesthöhe, dann wird trotzdem ein niedrigerer Wert als die Mindstehöhe gesetzt.

Patch für Primefaces 5.1
Ich habe den vorhandenen Patch erweitert und für die aktuelle Primefaces Version 5.1 angepasst.

InputTextarea Resize Patch herunterladen

Anpassung ohne Änderung der Bibliothek
Oft ist es jedoch keine gute Idee, den orginalen Sourcecode einer Bibliothek zu verändern. Die Änderung müsste dann z. B. bei jedem Update der Bibliotek immer wieder angepasst werden.

Etwas eleganter finde ich nachfolgende Lösung. Dort wird die Anpassung im eigenen Code vorgenommen und verändert nicht die Bibliothek selbst.

1. Folgende CSS Klasse muss hinzugefügt werden

.ui-inputtextarea-resizable-reference{
    position: absolute;
    bottom: 0;
    right: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    visibility: hidden;
}

2. Überschreiben der JavaScript Funktionen „setupAutoResize“ und „resize“ Komponente.

PrimeFaces.widget.InputTextarea.prototype.setupAutoResize_base = PrimeFaces.widget.InputTextarea.prototype.setupAutoResize;
PrimeFaces.widget.InputTextarea.prototype.resize_base = PrimeFaces.widget.InputTextarea.prototype.resize;

PrimeFaces.widget.InputTextarea.prototype.setupAutoResize = function(){
    var suffix, referenceContainerId;

    suffix = '_reference';
    referenceContainerId = this.jqId + suffix;
    this.referenceContainer = $(referenceContainerId);

    if (this.referenceContainer.length != 1) {
        this.referenceContainer = $(document.createElement('div'))
            .attr('id', this.id + suffix)
            .addClass('ui-widget ui-inputfield ui-inputtextarea ui-inputtextarea-resizable-reference')
            .appendTo($(document.body));
    }

    this.setupAutoResize_base();
    //this.resize();  //use this line to resize textarea on initialization
};


PrimeFaces.widget.InputTextarea.prototype.resize = function(){
    var newH, minH;

    //Update reference container and resize text area
    this.referenceContainer.width(this.jq.width());
    this.referenceContainer.text(this.jq.val());

    newH = this.referenceContainer.innerHeight();
    minH = parseInt(this.jq.css('min-height'), 10); //parse to int to remove all non numeric chars

    if(isNaN(minH) || minH === 0){
        this.jq.css('min-height',this.jq.height());
    }

    this.jq.height(newH);
};
Primefaces: AutoResize der inputTextarea mit dynamischer Breite fehlerhaft (Patch/Workaround)

5 Gedanken zu „Primefaces: AutoResize der inputTextarea mit dynamischer Breite fehlerhaft (Patch/Workaround)

  • Moin,

    schön, dass es noch jemandem aufgefallen ist. Ich habe diesen Bug ursprünglich gemeldet und konnte das unbegründete WontFix ebenso wenig nachvollziehen. Meiner Meinung nach hat sich PrimeFaces mit der Kombination SVN + Google Code werde sich und noch viel weniger der Community einen gefallen getan. Es wäre so viel transparenter, wenn man mittels Pull-Request Fixes beisteuern könnte, dann gibt es wenigstens eine Diskussionsgrundlage. Aber das scheint nicht gewünscht zu sein. Vielleicht deckt es nicht mit kommerziellen Interessen, ich weiß es nicht. Jedenfalls habe ich das frustrierende Prozedere schon ein paar mal durch und mittlerweile zum Glück nicht mehr so viel mit PrimeFaces am Hut.

    Nichtsdestotrotz, viel Erfolg!

  • Ich habe die Version Primefaces 5.1.9 getestet und zumindest dort scheint es so zu sein, dass die autoresize-Funktion der inputTextarea nie korrekt funktioniert.

    oder auch

    führen immer zu einer falschen Höhe, sobald man ein bisschen mehr Text eingibt (Copy&Paste).

    Der Patch scheint aber erstmal zu funktionieren. Ein erneutes Ticket bei pro.primefaces.org aufzumachen, würde wohl nicht schaden.

  • Das Problem wird in Primefaces 5.1.14 und 5.2 angeblich gelöst sein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.