On an ASP.NET GridView, I have a field that prints a string from the database. This data can range from 10 to 100 characters. When it is longer than normal, the field word-wraps the data, making the row take up more vertical space than the others. I want to truncate any data that does not fit on the row, and then have a "..." next to it to indicate there is more. I don't need to allow them to resize, I just don't want any rows of different height. I'm hoping this can be done dynamically on the client-side, for SEO purposes.
See the ActiveWIdgets Grid here, and resize the company name so that it does not fit. You will notice that it does not wrap the contents, but it instead does exactly what I want to do.
How can I apply this technique to an ASP.NET GridView? I assume some Javascript is involved. If that is true, I would prefer to NOT use a library like jQuery (don't ask why -- I am not allowed to use an external dependency for this project).
Table of contents
Illustration of problem
Illustration of one solution
Illustration of problem
Copy the following HTML into your browsers (at least Firefox and Internet Explorer 7, but you should try Opera too):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div, td
{
width: 100px;
border: solid 1px black;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div>
content content content content content content
</div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
content content content content content content
</td>
</tr>
</tbody>
</table>
</body>
</html>
Notice that the td element does not hide the overflowing content. Only the div element nows how to do this. Internet Explorer's td element does not even know how to stop wrapping the content.
Strictly speaking, according to the standard, the td element does not support the white-space rule. The div and th elements do.
Illustration of one solution
This is one solution to the problem (Tested in Opera, Firefox and Internet Explorer 7):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
td
{
border: solid 1px black;
}
div
{
width: 100px;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div>
content content content content content content
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you know your user is using Internet Explorer, you can use the following IE only CSS:
td.nooverflow
{
text-overflow:ellipsis;
}
Then set the ItemStyle for the column you want to fix the width of as <ItemStyle CssClass='nooverfolow'/> (you'll need to play with the CSS to get it right for your application)
Unfortunately since this is IE only, for other browsers, there are some hacks available to simulate the same thing:
Here's one for Firefox.
Here's another for Firefox
Here's one using jQuery
Related
From below html code I want to show complete table in page without horizontal scrollbar. I want to set html table width fit to screen. there is continuous text in td which I want to break and show in multiple lines such that table width will not go out of page.
For that I used word wrap property but it will not work. Please suggest me possible solution.
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table style="table-layout:fixed;">
<tr>
<td style="word-wrap:break-word;">jhdjhfjsjkfhjshdjfhjshfsbfsjkshdfjhsfjsdfdfjsndjkfnjsdnfsdfnsdjfnnsdjfnsdjnfjsdnf,sdnmfksdfsdfsdfsdnfklsdmklfmsdfsd,fsdfsdkfksdnmfnmsdkfnmsdmfmdfmd,.mf,dmf,msd,fm,sdmf,.smd,.fms,dmfms,dmf,s.dmf,.smdf,.smd,fmsdfm,.sdm,f.sdm,f.msd,.fms,.dmf,.sdmf,.sdmf,.smd,.fmsd,mf,.sdmf,.smd,.fmsd,.fm,sdmf,msd,.fms,.dmf,.sdmf,.sdmfsdmfsdf,.sdf,sdfsdfsdfsdf</td>
<td style="word-wrap:break-word;">jhdjhfjsjkfhjshdjfhjshfsbfsjkshdfjhsfjsdfdfjsndjkfnjsdnfsdfnsdjfnnsdjfnsdjnfjsdnf,sdnmfksdfsdfsdfsdnfklsdmklfmsdfsd,fsdfsdkfksdnmfnmsdkfnmsdmfmdfmd,.mf,dmf,msd,fm,sdmf,.smd,.fms,dmfms,dmf,s.dmf,.smdf,.smd,fmsdfm,.sdm,f.sdm,f.msd,.fms,.dmf,.sdmf,.sdmf,.smd,.fmsd,mf,.sdmf,.smd,.fmsd,.fm,sdmf,msd,.fms,.dmf,.sdmf,.sdmfsdmfsdf,.sdf,sdfsdfsdfsdf</td>
</tr>
</table>
</body>
</html>
The table (and by further extension, the cells) has no constriction, meaning it will stretch to fit around the content within it, so there is no reason for your words to be broken.
Try giving your table a width:
table{
width:100%;
}
JSFiddle
To use style="word-wrap: break-word; you have to fix the outer tag width.
table{
width:100%;
}
I am unable to get the borders of these td's to follow their rows as I scroll through this overflow:auto; <tbody>. Any ideas on a fix?
Note: Setting table-layout:fixed or making rows display:block isn't an option as the rows will lose their fluidity..
You can see the issue in the latest Firefox, so I assume it's messed up elsewhere.
Here is a test I setup (scroll to the bottom for the demo):
http://www.webdevout.net/test?01y
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<table>
<thead><th>One</th><th>Two</th><th>Three</th></thead>
<tbody>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
</tbody>
</table>
</body>
</html>
CSS:
table {width:100%;border-collapse:collapse;}
tbody {height:200px;overflow:auto;}
td {border-bottom:1px solid #f00;}
Also doesn't work in IE. This sums it up nicely: "the overflow property, as defined by CSS 2.1 specification, section 11.1.1, does not apply to table-row-group objects."
There are a couple of workarounds here, as detailed in this recent question on SO. The link from the OP has two interesting solutions, the first of which may work for you if you can't change the output. It basically involves wrapping the table in two divs, setting the inner div to overflow: auto, and absolutely positioning the thead relative to the outer div so it gets pulled out of the inner container.
Not sure why the funky behavior occurs in FF, but a solution is to create two tables and put the second one inside a div.
HTML:
<table>
<thead>
<th>One</th><th>Two</th><th>Three</th>
</thead>
</table>
<div>
<table>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
</table>
</div>
CSS:
table {width:100%;border-collapse:collapse;}
div {height:200px;overflow:auto;}
th {width:33%;}
td {border-bottom:1px solid #f00;width:33%;}
I added specific widths to the ths and tds to ensure the columns aligned since they're in different tables, but you might not have to specify.
I have a div set to overflow: auto, max-width of 250px.
Inside the div I have a paging control, which allows users to pull back 10, 20, 50, or 100 results. If they pull back enough results, the inner content (table) will grow larger than the div and should then be scrollable.
This works fine in Firefox 3.5 and IE8, however in IE7, the scrollbar only shows after the first postback that requires a scrollbar (e.g. user selecting 20). If the user then selects another amount that requires the scrollbar (50, 100), the bar in IE7 will disappear.
If the user goes back to 10 results (no scroll needed), then proceeds to 20 results (scroll needed) the scrollbar will once again show up in IE7.
I can still scroll the inner content with my mousewheel, there is just no scrollbar.
Anyone know what the issue could be? I'm stumped... can provide details if needed.
Clarification: The scrollbar is disappearing even when the content is overflowing the Div.
Change the CSS property overflow from auto to scroll
See http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
I had a similar issue and managed to resolve it. Now, understand I had the width of a table set to 100%. I believe the problem is related to the doctype. I tried setting the doctype to
<!DOCTYPE html> <!-- HTML5 -->
and I still had the same problem. It was only after removing the doctype declaration that the IE7 bug went away (quirks mode, which I wouldn't recommend). I have also tested it using XHTML 1.0/1.1/HTML 4.01 doctype declarations (Strict, Transitional, Frameset) and the same problem occurs. It appears this issue arises because using a doctype declaration tells the browser to use standard mode. IE7 and less does not handle standard mode browsing very well.
To resolve it for IE7, I set the width to 99%.
Here is working sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#Content
{
overflow-y: auto;
overflow-x: hidden;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="Content">
<table width="99%" border="1">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Currently I'm working on two table columns next to eachother, which contents must be of equal height. Sounds classic, however, the table/row/cells can't be given a fixed height, because it will be different every time.
I've simplified the case to this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<table cellspacing="0" cellpadding="0" style="width: 500px; border: 2px solid blue;">
<tr>
<td style="height: 100%;"><div style="height: 100%; background-color: yellow;">left<br />left<br />left<br />left<br />left</div></td>
<td style="height: 100%;"><div style="margin-left: 20px; height: 100%; background-color: yellow;">right</div></td>
</tr>
</table>
</body>
</html>
So I'd like the yellow blocks to be of equal height, without giving table/row/cell/div a fixed width (relative is fine). I know the table cells can be given a yellow background, but this is a simplified example of blocks that can me minimized, moved, etc., so giving table cells a color is not an option. Use of tables is not necessary, but thought it would be better to illustrate this case.
Thanks for replies!
I'm not sure I understand your problem exactly but - you are giving a height of 100% to the div and it's parent also has 100% - but obviously this won't work since the div and also td has no relative from which to calculate those 100%.
As a solution you could try doing it with faux columns. A list apart has a nice article about it http://www.alistapart.com/articles/fauxcolumns/ .
This is a follow up question to that at Can I create a HTML table width a percentage height but pixel accurate row heights?.
I have a table in a HTML page that will be used for tabular data (so I don't want an answer based around divs). This needs to be rendered at 100% height with the top row having a fixed size and the second row stretching to fit the rest of the available area.
I have used the following code:
<html>
<body>
<table style="border-collapse:collapse;height:100%;width:100%;">
<tr>
<td style="border:solid 1px black;height:100px">1</td>
<td style="border:solid 1px black">2</td>
</tr>
<tr>
<td style="border:solid 1px black">3</td>
<td style="border:solid 1px black">4</td>
</tr>
</table>
</body>
</html>
This works as I require it to.
The problem is, when I put this in an ASP.NET page created in Visual Studio, it adds a DOCTYPE element. After adding the DOCTYPE (and setting the CSS for the html and body tags to include height:100%), the top row of the table is much bigger than the bottom row and neither row is of a fixed height.
I know I should use a DOCTYPE and not rely on "quirks mode" in Internet Explorer to ensure future compatibility. However, I have tried all the DOCTYPEs I can find to try and change this behaviour to what I need but can't get it to work. It does work in Firefox but the job is for an Intranet where the users use IE7.
If you want to see the problem, try the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
<body style="height:100%">
<table style="border-collapse:collapse;height:100%;width:100%;">
<tr>
<td style="border:solid 1px black;height:100px">1</td>
<td style="border:solid 1px black">2</td>
</tr>
<tr>
<td style="border:solid 1px black">3</td>
<td style="border:solid 1px black">4</td>
</tr>
</table>
</body>
</html>
Does anyone know the answer?
There's an easy way to fix this, especially if the page just contains this table, and you just want it to work. I'm not sure if ASP.NET will let you though: Add a comment in front of the doctype. E.g.
<!-- Here for IE6/7 -->
<!DOCTYPE html (etc.)>
... The HTML that works in quirks mode ...
This will make IE6 and IE7 trigger quirks mode, meaning those earlier answers will actually work. But it is perfectly valid use of the DOCTYPE and will trigger standards mode in all other browsers. IE8 (RC1 anyway) also uses quirks mode for this, though it does also render correctly in standards mode.
Of course, keeping IE6 and 7 in quirks mode means they'll be in quirks mode for all the other stuff too, so if you're going to use a lot of other CSS, you might regret it.
I try to use % as less as possible because padding, borders and margins are added to the 100% width if any, unless you use browsers from the stone-age.. I use to just tile a background image to fake whatever I want to have 100% height on a parent element or the body.
Well the solution I posted to your problem, which had a (necessary) div wrapped around your table, works perfectly with that DOCTYPE and a couple of others I tried so I'm not sure what the problem is.
Are you simply choosing to ignore it because it has a div in it? Or did you not read it or try it? What is the problem with divs?
first I would recommend setting the height at the Row level, not the Cell level. And secondly if you set the height of the second row to 100% IE will have it fill the rest of the available space in the table. The following should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
<body style="height:100%">
<table style="border-collapse:collapse;height:100%;width:100%; table-layout:fixed;">
<tr style="height: 100px;">
<td style="border:solid 1px black">1</td>
<td style="border:solid 1px black">2</td>
</tr>
<tr style="height: 100%">
<td style="border:solid 1px black">3</td>
<td style="border:solid 1px black">4</td>
</tr>
</table>
</body>
</html>
Using the percent based heights though is probably not your best choice, but without knowing and understanding what you are trying to accomplish thats the best advice i can give you