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

Hugh Miller hmiller at cfpress.co.uk
Mon Aug 16 16:44:42 CDT 2010


First up, is there any reason that tool-tips can't be used for this? The 'title' attribute of a tag exists to specify extra information about an element - and this is sort of the same. I know they aint the prettiest of things, and can be erratic on mouseovers, but they do the job in a limited way.

If you'd prefer to be in control of the look and feel of the thing the only thing that springs to mind is using javascript to generate a box on mouseover for each <td> that is positioned near the cursor. That would be independent of the overflow:hidden (which will break the layout if you switch the style using JS as you've shown in your demo) and would mean you could keep the <td> itself clean. If you script it to generate the box dynamically you could get the innerHTML of the <td> and recreate that in the box, it'll give a popup on non-overflowing boxes, but unless I'm missing something you'll probably be doing that anyway.


----- Original Message -----
From: "Frank Marion" <lists at frankmarion.com>
Sent: Mon, 16/8/2010 20:13
To: thelist at lists.evolt.org
Subject: Re: [thelist] Absolute positioned element inside a <td> that has overflow:hidden

Sorry, Bill, I haven't slept well, and my mind is slow. This is what I  
understand, can you confirm or clarify?

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.

Is my understanding correct?

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

Correct me if I'm wrong, my brain is slow at the moment.

On 2010-08-16, at 2:53 PM, Bill Moseley wrote:
> Let me as the question I should have asked first.
> I need a three column layout. The left and right columns can be  
> fixed width
> but want a fluid column in the center.  That's easy and there's a  
> ton of
> examples online.
> But, in my center column I have a table that includes three columns of
> user-supplied data.  I have no idea which column for a given use  
> will have
> the longest string and the user-data can be very long strings of  
> characters
> that the browser will not wrap and if the table is not table-layout:  
> fixed
> will push the table width out of the container.
> What Gmail does for its inbox, for example, is set overflow: hidden  
> on the
> table cells, and sets a fixed width on the table and columns.   This  
> lets
> the overflow: hidden work.  Then it uses javascript onresize to  
> reset the
> widths so that it appears to be a fluid layout.
> Is there another solution to having a fluid layout yet allow  
> overflow:hidden
> to work on the table cells?

Frank Marion
lists [_at_] frankmarion.com


* * Please support the community that supports you.  * *

For unsubscribe and other options, including the Tip Harvester
and archives of thelist go to: http://lists.evolt.org
Workers of the Web, evolt ! 

This message has been scanned for viruses and
dangerous content by MailScanner, and is
believed to be clean.

More information about the thelist mailing list