Résolu Javascript et Materialize

[Wims]

Bonsoir,

J'ai un petit soucis avec le Javascript de Materialize (

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

)

J'ai pris leurs Textarea :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Et en dessous du code HTML, on y trouve du JS qui nous permet d'automatiquement adapté le textarea par rapport à la longueur de notre texte, cette ligne :

$('#textarea1').trigger('autoresize');

Moi ce que je fais, c'est que avec PHP, je rempli automatiquement le textarea :

<textarea id="textarea1" class="materialize-textarea" name="content"><?= $article->content ?></textarea>

Le problème étant que le texte apparait bien, mais le textarea ne s'agrandit pas :

Il faut que je tape quel que chose dans celui-ci pour qu'il s'agrandisse :

Ce que je ne comprends pas, c'est que quand je tape le JS donné par Materialize dans la console developer de Chrome, le textarea s'agrandit bien..

Help

 

[Paul GTP]

Peut-être que le problème c'est l'ordre des choses
Essaie de mettre ton script JS plus bas dans la page que ton code PHP (bon ça me paraît tiré par les cheveux comme solution mais qui ne tente rien n'a rien )

Sinon, la solution "sale" c'est de passer par jQuery et d'effacer/rajouter un caractère dans ton textarea avec .replace() en dynamique pour voir si ça s'affiche correctement
Enfait le problème vient de l'incompatibilité PHP/JS... Ces 2 langages fonctionnent ensemble mais leurs fonctions sont distinctes donc parfois mélanger les deux n'est pas une très bonne idée

 

[Wims]

Essaie de mettre ton script JS plus bas dans la page que ton code PHP (bon ça me paraît tiré par les cheveux comme solution mais qui ne tente rien n'a rien )

J'y avais déjà pensé, rien ne change

donc parfois mélanger les deux n'est pas une très bonne idée

Tu as une solution pour régler mon soucis sans utiliser le JS du coup?

 

[Paul GTP]

Il y a cette solution sur Grafikart, elle a l'air plus longue que la tienne mais le code a l'air propre donc à tester:

jQuery

(function($) {
        $.each($('textarea[data-autoresize]'), function() {
        var offset = this.offsetHeight - this.clientHeight;

        var resizeTextarea = function(e) {
            $(e).css('height', 'auto').css('height', e.scrollHeight + offset);
        };
        $(this).on('keyup input', function() { resizeTextarea(this); });
        resizeTextarea(this);
    });
 })(jQuery);

CSS

textarea {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-family: "Roboto";
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
    word-wrap: break-word;
}

Si ça ne marche toujours pas je me pencherai plus sérieusement sur ton cas en faisant des tests par moi-même

 

[Wims]

Il y a cette solution sur Grafikart, elle a l'air plus longue que la tienne mais le code a l'air propre donc à tester:

jQuery

(function($) {
        $.each($('textarea[data-autoresize]'), function() {
        var offset = this.offsetHeight - this.clientHeight;

        var resizeTextarea = function(e) {
            $(e).css('height', 'auto').css('height', e.scrollHeight + offset);
        };
        $(this).on('keyup input', function() { resizeTextarea(this); });
        resizeTextarea(this);
    });
 })(jQuery);

CSS

textarea {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-family: "Roboto";
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
    word-wrap: break-word;
}

Si ça ne marche toujours pas je me pencherai plus sérieusement sur ton cas en faisant des tests par moi-même

Toujours rien

 

[Paul GTP]

Engage en MP

Envoie moi si possible:

• un lien de demo
• ton code (le plus complet possible)

Je vais voir ce que je peux faire

 

[Rivals]

Ouvre ta console et regarde si il y a une erreur déjà, Materialize importe déjà jQuery normalement ou alors il faut déjà l'importer

 

[Paul GTP]

J'ai déplacé la discussion en section Résolu avec l'autorisation de l'auteur de la discussion .

Bon après-midi,
Paul GTP