CODEWITHSUNDEEP
css
David Starkey
David Starkey

Reputation: 1840

CSS display but keep row height

I am using a table to display some data and for one row, I am displaying a 35-character preview of a (possibly) longer string. When the user does a mouse-over on one of the previews, it displays the full text next to it.

The problem is when the full text is displayed, the tr height is changed to fit the full text, but I want it to stay the same size.

<td><a href="link.asp?tid=<%=ID%>" onmouseover="showDetails(<%=ID%>);"><%=shortPreview%></a>
<br/><div class="details" style="display:none;" id="<%=ID%>"><%=rsTickets("details")%></div></td>

CSS

.details {
  position:relative;
  top:-15px;
  left:260px;
  background-color:#FFFFAA;
  z-index:1;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:15px;
  padding-left:5px;
  border:1px;
  border-style:solid;
  border-color:#CCCC99;

  -moz-border-radius: 1em 2em 2em 1em;
  border-radius: 1em 2em 2em 1em;
}

Upvotes: 0

Views: 126

Answers (2)

EscalatedQuickly
EscalatedQuickly

Reputation: 402

Thing is that when you set an object to be relative, then it is relative to the objects around it. This means that if you change the height of the div (or in this case, shows it), the surrounding objects will adapt to this change. So when you set the div to be visible the td, which encapsulates it, will change it's height as well.

Setting the div to an absolute position solves the problem, but then it might get difficult to position it right. Unless you put it in another div. If you put an absolute div within a relative div, then the absolute div will be absolute to the relavite div, thus solving the problem. Here's an example:

<table>
    <tr><td><div style=position:relative>
          This div will not affect the td more than will this text.
          <div style=position:absolute;top10px;>
               This div will not affect the td, since it's absolute, and will be
               10px from the top of the outer div
          </div>
    </div></td></tr>
</table>

This should do the trick. Works for me at least.

Upvotes: 1

ZorleQ
ZorleQ

Reputation: 1427

Put a fixed size div inside your cell and set it to position: relative. Inside that div put your details one and set it to position: absolute;. This should work for 99%.

Upvotes: 2

Related Questions