scrollWidth/scrollHeight donner invalide dimensions
Comme il est dit au https://developer.mozilla.org/en/Determining_the_dimensions_of_elements:
Si vous avez besoin de connaître la taille réelle du contenu, indépendamment de la façon dont
il est actuellement visible, vous devez utiliser le scrollWidth et
scrollHeight propriétés.
Donc, je suis en utilisant le scrollWidth et scrollHeight propriétés pour redimensionner l'élément à sa taille réelle (jsfiddle).
HTML:
<textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</textarea>
JavaScript:
(function ($) {
$(document).ready(function () {
$('textarea').css({
width: $('textarea')[0].scrollWidth,
height: $('textarea')[0].scrollHeight
});
});
})(jQuery);
Je suppose que si j'ai mis les dimensions de la taille réelle du contenu de l'élément aurait pas de barres de défilement ses dimensions devraient être assez grand pour que le contenu ne déborde. Droit? Il devrait donc être la façon dont vous voyez dans cette image: i.stack.imgur.com/lKxoz.png
Mais il ne fonctionne pas correctement comme vous pouvez le voir sur les images suivantes:
IE: i.stack.imgur.com/JXt0e.png
Chrome: i.stack.imgur.com/emGyG.png
Opéra: i.stack.imgur.com/7MAX5.png
Ma question est quel est le problème avec le scrollWidth et scrollHeight propriétés? Ils me donnent invalide dimensions!
OriginalL'auteur Jack | 2011-09-10
Vous devez vous connecter pour publier un commentaire.
Le problème, c'est que vous n'êtes pas, y compris la taille des barres de défilement. Essayez le réglage de "débordement" de "caché" ou en ajoutant la taille des barres de défilement et il fonctionne. Il existe des moyens pour calculer cette taille, Google vous aidera. Pour des fins de test, l'utilisation de Chrome sur Windows et 17px.
Selon le contexte, vous êtes à l'aide de cet extrait vous devrez peut-être réinitialiser la taille à chaque fois que les changements de contenu. Vous devez aussi donner de la zone de texte de largeur fixe, sinon le navigateur va céder à ce qu'il ressent.
OriginalL'auteur Thiemo Müller
Je sens que Vous avez pris, il est très complexe!
Il y a un
scrollHeight
et etscrollWidth
propriété est égale à la largeur et à la hauteur de ce qui est à l'intérieur d'un élément déroulant. Le choix deheight
etwidth
de cet élément àscrollWidth
etscrollHeight
peut résoudre le problème.Regarder violon ici
vous voulez "redimensionner l'élément à sa taille réelle" et il le fait... ce que vous voulez, alors?
En fait il ne l'est pas. Regardez les captures d'écran que j'ai posté. Votre suggestion de code est la même que la mienne sauf le vôtre n'est pas utiliser jQuery (je pense que c'est ce que vous voulez dire par "très complexe", n'est-ce pas?) et le tien a une faute de frappe, juste pour info: il doit être "textarea" au lieu de "texyarea".
Et si vous ne comprenez pas ce que je veux, je veux redimensionner une zone de texte afin que le texte s'adapte à l'intérieur sans utiliser les barres de défilement.
Si vous pouvez le voir, j'ai même posté un lien vers le résultat que je souhaite: i.stack.imgur.com/lKxoz.png
OriginalL'auteur Mohsen