table> tbody> tr> td> div> balise span et zone de texte sans redimensionnement de la table?

Question

J'ai donc ce contrôle que j'essaie de faire. C'est un éditeur de texte sur place pour un site Web, et l'idée de base est qu'il affiche une étiquette avec du texte, et lorsque vous cliquez sur le texte, l'étiquette disparaît et une zone de texte apparaît à sa place, afin que l'utilisateur puisse modifier les données.

La disposition générale est quelque chose comme ça (id et événements pour plus de clarté):

<table> 
    <tbody> 
    <tr> 
     <td> 
     Some other cell, etc. 
     </td> 
     <td> 
     <div> 
      <span>When you click me, I'll disappear and show the input instead.</span> 
      <input type="textbox" style="display:none"/> 
     </div> 
     </td> 
    <tr> 
    </tbody> 
</table> 

Le problème est, cette configuration est assez difficile, et redimensionne les cellules lorsque la durée disparaît et l'entrée se présente . Mon objectif global est de pouvoir mettre du CSS sur la div, la span et/ou l'input, afin que cette chose reste immobile. J'ai eu un peu de chance avec la position: absolue sur la div, cependant, le texte déborde simplement ses limites, et ne s'enroule pas correctement dans la cellule. Comme il s'agit d'un contrôle, je peux déplacer ces trois éléments au besoin, ou ajouter d'autres éléments, mais je voudrais vraiment laisser les balises table, tbody, tr et td seules.

Des idées?

Edit:

En fin de compte, j'ai eu quelque chose comme ceci:

.inPlaceEditor 
{ 
    margin-right:0px; 
    margin-left:0px; 
    margin-top:0px; 
    margin-bottom:0px; 
    white-space:normal; 
    display:block; 
    width:100%; 
    height:100%; 
} 

.inPlaceEditor span 
{ 
    white-space:normal; 
} 

.inPlaceEditor input[type="textbox"] 
{ 
    display:none; 
    width:100%; 
    border:solid 0px black; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding-bottom:0px; 
    padding-top:0px; 
    padding-left:0px; 
} 

Avec un gestionnaire d'événements de clic qui ressemble à ceci:

function ShowInPlaceTextEditor(_this) { 
    var div = $(_this).closest('td'); 
    div.css({ height: div.height(), width: div.width() }); 
    $(_this).hide().next().show().focus().selectAllText(); 
} 

Et un gestionnaire associé qui cache la zone de texte qui ressemble à ceci:

function HideInPlaceTextEditor(_this) { 
    $(_this).closest('td').css('height', ''); 
    $(_this).hide().prev().html($(_this).val() == '' ? $(_this).closest('div').attr('emptyText') : $(_this).val()).show(); 
} 

Merci à tous ceux qui ont aidé.

Answer 1

Si vous pouvez compter sur javascript, enroulez un div autour de tout dans cette cellule. Lorsque la page se charge, obtenez la hauteur actuelle de cette div telle qu'elle a été affichée. Ensuite, attribuez cette hauteur aux styles div in. De cette façon, lorsque vous affichez l'entrée, elle doit toujours être maintenue ouverte par cette div avec la hauteur qui lui est assignée. Je suppose que l'entrée est un peu plus grande que la plage de texte, donc vous devrez peut-être augmenter cette hauteur de quelques pixels.

Answer 2

Quelque chose ne va pas avec le réglage de la largeur/hauteur du div ou de l'élément td? Ne plaisante pas avec le positionnement.

Answer 3

La seule façon que je connaisse pour empêcher les cellules de se développer est d'utiliser cette ...

table { table-layout: fixed; width: 500px; } 
table td { overflow:hidden; } 

Bien, serait de rendre le div relativement positionné une tentative intéressante, puis définissez l'entrée comme absolue. ..

td div { position: relative; } 
td div input { position: absolute; } 

éléments positionnés Absolument ne provoquent pas d'expansion, et leur position de départ est basé sur le premier parent relativement positionné.

Answer 4

Lors de la fonction qui masque le texte et affiche la zone de texte, vous pouvez rechercher les dimensions de la cellule et redimensionner la zone de texte correspondante.

<div> 
    <span onclick="flip(this,'box1')">When you click me, I'll disappear and show the input instead.</span> 
    <input id='box1' type="textbox" style="display:none"/> 
</div> 

<script> 
    function flip(text, boxID) 
    { 
    var box = document.getElementById(boxID); 
    var parent = text.off 
    box.style.width = text.offsetParent.offsetWidth + "px"; 

    text.style.display = "none"; 
    box.style.display = ""; 
    } 
</script> 

Bien sûr, si votre texte est assis par lui-même sur une ligne, il redimensionne à la largeur du conteneur, de sorte que vous pouvez définir une largeur maximale de la boîte aussi.

Et bien sûr, si vous souhaitez utiliser un TextArea au lieu d'une zone de texte, vous pouvez renifler & régler la hauteur comme easilly (avec .height & .offsetHeight, respectivement).

Bonne chance!