table > tbody > tr > td > div > toggled span and textbox without the table resizing?

Question

So I've got this control I'm trying to make. It's an in-place text editor for a website, and the basic idea is that it will display a label with some text, and when you click the text, the label disappears and a textbox appears in it's place, so that the user can edit the data.

The general layout is something like this (id's and events removed for clarity):

<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>

So the problem is, this setup is pretty fussy and resizes the cells when the span disappears and the input shows up. My overall goal is to be able to set some CSS on the div, span and/or input, in order to get this thing to stay still. I've had a minor amount of luck with position:absolute on the div, however, the text simply overflows it's bounds, and doesn't wrap properly within the cell.

As this is a control, I can move these three elements around as needed, or add other elements, but I would really like to leave the table, tbody, tr and td tags alone.

Any ideas?

Edit:

In the end, I had something like this:

.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;
}

With a click event handler that looks like this:

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

And an associated handler that hides the textbox that looks like this:

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

Thanks to everyone who helped.

Answer 1

If you can rely on javascript, wrap a div around everything in that cell. When the page loads, get the current height of that div as it was rendered. Then, assign that height to the div in styles. This way, when you display the input, it should still be propped open by that div with the height assigned to it. I would suspect the input is a little taller than the span with text, so you may need to bump that height up a few pixels.

Answer 2

The only way I know to prevent cells from expanding is to use this...

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

Although, an interesting attempt would be to make the div relatively positioned, and then set the input as absolute...

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

Absolutely-positioned elements don't cause expansion, and their starting position is based on the first relatively-positioned parent.