2 Replies - 1790 Views - Last Post: 28 September 2011 - 07:22 PM

#1 bonecone   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 14-November 09

Problem with relative positioning and table cell height

Posted 27 September 2011 - 12:12 PM

See screenshot attached.

I want to set up a table so that error messages appear directly above specific table columns in the form of a div tag with a red background and the same width as the column.

To do this I've added a div tag inside the <th> element of the table, with the display property set to 'none'.

<th>
   <nobr>Header Content</nobr>
   <div id="error_message">Error Message</div>
</th>



When I want to display an error message above the table I use the following styles on the div tag

      background-color: #ffcccc;
      width: 100%;
      position: relative;
      left: 0px;
      top: -100px;
      z-index: 1;
      display: block;



It displays the div tag above the header like I want, but it still stretches the height of the <th> element as if it was still contained inside of it. How do I do this without stretching the cell height?

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Problem with relative positioning and table cell height

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5466
  • View blog
  • Posts: 14,421
  • Joined: 18-April 07

Re: Problem with relative positioning and table cell height

Posted 27 September 2011 - 03:39 PM

Well the problem here is that the element is positioned using relative. Meaning that the element (and its dimensions) are kept in the flow of the page (in this case inside the <th>) and then it is positioned from where it would have normally appeared (-100 pixels upward).

So you have some choices.

One is to take the element out of the flow using something like absolute positioning and then specify the exact width, height and location on the page.

Another is to make some kind of invisible row for the table (change your <th> to regular <td>) and put your error messages for each column in that invisible row above the headers. Then when you need to show it, you can show the element which will expand the row.

Then of course there is a javascript solution where you simply create the element on the fly and append it to the document, positioning it to be directly above a certain column. This will be a little more involved depending on how you trigger the error messages.

But as it stands right now, this is working as intended. The size and position of the element is still in the page flow and which is why it is not resizing the header cell. It then moves the element relative to where it normally appears.

:)

This post has been edited by Martyr2: 27 September 2011 - 03:41 PM

Was This Post Helpful? 0
  • +
  • -

#3 bonecone   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 14-November 09

Re: Problem with relative positioning and table cell height

Posted 28 September 2011 - 07:22 PM

Thanks!

I did use the visibility property afterwords, though not in exactly the same way as described.

I needed the error message to appear above the fieldset element, so I couldn't just add another row to the top of the table.

I created another table above the fieldset that had the same number of <th> cells containing the same content as the header section of the table inside the fieldset. But I set the visibility property of the cell content to hidden. Hidden elements still take up the same amount of space as when they are visible, so the table cells would always line up perfectly without having to set a fixed width.

I use javascript and the DOM to populate the <th> cells above the fieldset with content from the <th> cells inside the fieldset so that it re-adjusts itself to whatever changes I make to the table headers of the inside table.

Only had to fool around with it until 2 AM :eek:

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1