2010-06-23 11 views
0

Élément de taille donc il est exactement aussi grand qu'il doit être pour ne pas faire défiler Je travaille sur un outil pour permettre de créer de petites "notes" que Je transforme ensuite en Ext.Draggable articles. Ce que je voudrais faire, c'est que ces objets ne soient pas plus hauts qu'ils ne le devraient.Taille élément donc il est exactement aussi grand qu'il doit être pour ne pas faire défiler

Les éléments sont positionnés absolument: position: absolute fixé avec top et left et height et width valeurs en ligne. Le problème est que les valeurs de hauteur ne sont pas vraiment très fiables.

Est-il possible de définir la taille à quelque chose de très court (disons 3px), puis incrémenter la hauteur jusqu'à ce que les barres de défilement disparaissent? Comment puis-je savoir quand cela se produit, et puis-je le faire d'une manière fiable dans tous les navigateurs?

Code: http://github.com/artlung/ArtLung-Notes/blob/master/v2/index.js

+0

En outre, c'est dans le nouveau framework Sencha d'ExtJS, qui utilise ExtJS sous le capot, mais s'il existe une solution DOM universelle, ce serait génial. Aussi serait intéressé par d'autres implémentations (jQuery, Prototype, MooTools) que je peux apprendre et modifier. – artlung

+1

Vous ne supprimerez pas simplement la hauteur explicite? (Je sais qu'ext généralement aspire pour autosizing et je dois lutter chaque fois que j'en ai besoin dans un autre cas si.) – doublep

+0

Cela semble si simple. Pour une raison quelconque, j'ai pensé que je devais mettre des hauteurs sur les éléments quand je les ai créés. Cela semble fonctionner dans Firefox, Chrome et Safari, ce qui est un excellent signe! – artlung

Répondre

1

En général, voir Ext.util.TextMetrics.getHeight(). Notez que vous ne pouvez pas utiliser le singleton pour la détermination de la hauteur.

Cependant, je pense que la suppression de la hauteur explicite devrait généralement résoudre votre problème. C'est à moins que vous ayez besoin de synchroniser quelque chose comme la taille de l'ombre.

+0

Merci pour la référence à 'Ext.util.TextMetrics' - je vais regarder celui-ci dans le futur. Parfois, ce sont les solutions simples qui sont les meilleures. – artlung

1

Si style.position d'un élément est absolu et que la propriété style.width est déterminée, la définition de style.height sur 'auto' fera une boîte contenant pour son contenu et son remplissage, sans barres de défilement.

+0

Il semble que 'auto' est la valeur par défaut http://www.w3.org/TR/CSS2/visudet.html#the-height-property – artlung