[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
Bill,
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.
H
----- 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. * *
http://evolt.org/help_support_evolt/
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