[thelist] Absolute positioned element inside a <td> that has overflow:hidden

Bill Moseley moseley at hank.org
Mon Aug 16 14:51:57 CDT 2010


On Mon, Aug 16, 2010 at 12:13 PM, Frank Marion <lists at frankmarion.com>wrote:

>
> You have random cells that may or may not display strings that might exceed
> the side of a td. You want to create a sort of disclosure div, so that if
> the user sees "this is some really long text and to [more]". When they hover
> or click, it expands the div so that they can see the rest of the data. Sort
> of a tool-tips deal.
>

Close.  Replace the "this has a popup" text in the <td> with something the
browser won't wrap.

"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

So, in that case I added overflow: hidden on the <td>, but in all but IE
that prevented the popup absolute positioned box from displaying outside the
<td>.

So, the solution seems be
 <td overflow:visible position:relative>
    <div overflow:hidden>table cell text that might be
toooooooooooooooooooooooooooooooooooo long</div>
    <div position:absolute>popup box</div>
</td>

*IF* that's the case, and you can use js, is there some reason you don't use
> overflow as an on-off switch, as seems to be the natural behaviour right
> now?
>

You mean toggle the overflow with js?  No, the purpose of the box is not to
display the potentially overflowing text.




-- 
Bill Moseley
moseley at hank.org


More information about the thelist mailing list