2017-09-25 2 views
0

Lorsque vous utilisez un redimensionnable <textarea>:textarea devrait redimensionner

#a { resize: horizontal; height: 200px; }
<textarea id="a">Test</textarea>

Comment faire redimensionnable de 0% à 100% navigateur largeur? (il semble impossible, même si nous utilisons min largeur ...)

également toute la limite verticale entre textarea et le reste de la page doit afficher un curseur de redimensionnement, pourquoi est-il pas affiché, même si vous utilisez resize: horizontal; ?

+0

Dans quelles circonstances vous avez besoin pour être 0% largeur? En outre, vous posez des questions sur une zone de texte redimensionnable, mais votre exemple utilise une largeur fixe. – FluffyKitten

+0

@FluffyKitten par exemple lorsque vous avez deux colonnes: une colonne d'éditeur à gauche et une colonne d'aperçu à droite. Lorsque vous souhaitez afficher uniquement l'aperçu, vous voulez pouvoir faire glisser la colonne textarea de l'éditeur sur 0 largeur. – Basj

+2

@FluffyKitten Je pense que ce n'est pas un fixe, vous pouvez le faire glisser de bas à droite. – Basj

Répondre

2

Tada. Merci @Basj.

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    margin: 0; 
 
} 
 

 
textarea { 
 
    min-width: 0px; 
 
    max-width: 100%; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    min-height: 100%; 
 
    width: 0; 
 
}
<textarea></textarea>

+0

Vous pouvez obtenir exactement la même chose sans JS, sans jQuery, mais juste en réglant 'textarea {width: 0; } 'dans le CSS. – Basj