PDA

View Full Version : Resolved expand TD contence



BubikolRamios
Jan 19th, 2009, 03:51 PM
<TD sytle = 'width:200px;'> some multiline text</TD>

TD gets expanded (height)automaticaly to its complete inner text.

Dont want that, want to be one line of text height(displaying first few words of first line of text), stay that all the way, but comlete inner text (in separate embeded container ?)expanded to appropriate height (display all text at width 200px) on mouse move/hover

Any suggestion ?

BoldUlysses
Jan 19th, 2009, 04:03 PM
Are you displaying tabular data, hence the <td>? If not, how about a <div> instead?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>site 118</title>

<style type="text/css">

#expand {
border:1px solid #f00;
width:200px;
font-size:1em;
line-height:1.15em;
height:1.15em;
overflow:hidden;
}

#expand:hover {
height:auto;
}

</style>

</head>

<body>

<div id="expand">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
</div>

</body>
</html>

Note this will need some JavaScript to work properly in IE.

BubikolRamios
Jan 19th, 2009, 04:35 PM
yes it is tabular data, but np, can insert DIV iside TD, problem remains that then the underlyaing row gets pushed down, which is bad, the div should pop out of the table.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>site 118</title>

<style type="text/css">

#expand {
border:1px solid #f00;
width:200px;
font-size:1em;
line-height:1.15em;
height:1.15em;
overflow:hidden;
}

#expand:hover {
height:auto;
}

</style>

</head>

<body>
<table>
<tr>
<td>
<div id="expand">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
</div>
</td>
</tr>
<tr>
<td>
test second row
</td>
</tr>
</table>
</body>
</html>

abduraooft
Jan 19th, 2009, 04:42 PM
Like

table td{
position:relative;
}
#expand {
border:1px solid #f00;
width:200px;
font-size:1em;
line-height:1.15em;
height:1.15em;
overflow:hidden;
position:absolute;
left:0;
top:0;
}

#expand:hover {
height:100px;
overflow:auto
}
?

BoldUlysses
Jan 19th, 2009, 04:49 PM
This is normally a situation where a little bit of positioning would work, but tables and absolute positioning have such a weird relationship...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>site 118</title>

<style type="text/css">

* {
padding:0;
margin:0;
}

#expand_cell {
position:relative;
width:202px;
height:1.15em;
background:#f0f;
}

#expand {
position:absolute;
top:0px;
left:0px;
border:1px solid #f00;
width:200px;
font-size:1em;
line-height:1.15em;
height:1.15em;
overflow:hidden;
z-index:5;
}

#expand:hover {
height:auto;
}

</style>

</head>

<body>
<table>
<tr>
<td id="expand_cell">
<div id="expand">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
</div>
</td>
</tr>
<tr>
<td>
test second row
</td>
</tr>
</table>
</body>
</html>

Normally that would work, but as mentioned before, table and positioning are strange bedfellows even with normally standards-compliant browsers. Maybe others could chime in on this one.

BubikolRamios
Jan 19th, 2009, 05:24 PM
abduraooft:

does not work.
seems that rule: relative, then absolute does not work in realation td - div
div gets positioned absolutely realtive to whole document, not inside td.
tested in FF.

BoldUlysses
Jan 19th, 2009, 05:28 PM
BubikolRamios:

Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>site 118</title>

<style type="text/css">

* {
padding:0;
margin:0;
}

#expand_cell {
position:relative;
width:202px;
height:1.15em;
background:#f0f;
}

#expand {
position:absolute;
top:0px;
left:0px;
border:1px solid #f00;
width:200px;
font-size:1em;
line-height:1.15em;
height:1.15em;
overflow:hidden;
z-index:5;
}

#expand:hover {
height:auto;
}

</style>

</head>

<body>
<table>
<tr>
<td>
<div id="expand_cell">
<p id="expand">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
</p>
</div>
</td>
</tr>
<tr>
<td>
test second row
</td>
</tr>
</table>
</body>
</html>

I wrapped the element to be expanded in a containing div and set it to position:relative instead of the table cell. Also changed the initial <div> to a <p> to avoid divitis and try to make things a little more semantic. Checks out in FF3 and Safari.

BubikolRamios
Jan 19th, 2009, 05:47 PM
final test, tested in FF3 and IE6



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>site 118</title>

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->


<style type="text/css">

* {
padding:0;
margin:0;
}

#expand_cell {
position:relative;
width:200px;
height:1.15em;
}

#expand {
position:absolute;
top:0px;
left:0px;
width:200px;
font-size:1em;
line-height:1.15em;
height:1.15em;
overflow:hidden;
background:gray;
}

#expand:hover {
height:auto;
}

</style>

</head>

<body>
<table>
<tr>
<td>
test first row
</td>
</tr>
<tr>
<td>
<div id="expand_cell">
<p id="expand">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
</p>
</div>
</td>
</tr>
<tr>
<td>
test second row
</td>
</tr>
</table>
</body>
</html>

BubikolRamios
Jan 19th, 2009, 06:19 PM
note: if jou have multiple TD like 'expand' one ower another then there is a problem with z-index, first created, on expand, falls behind later created