I've got a multi-column panelGrid setup, with dataTables as each of the columns. Each of the dataTables is a different length. This results in the panelGrid stretching out to fit the largest dataTable (so far, that's good). The remaining dataTables are centered vertically (this is not good as it looks horrible on screen) instead of being top justified.
How can I tell panelGrid to top-justify contents? Or, is my approach completely wrong and I need to do something different (if so, suggestions are welcome)?
JSF renders as HTML and can be styled with CSS. Inspect the element as follows:
View the JSF page in a browser.
Right-click the page.
Choose View Source.
The <h:panelGrid> renders an HTML <table> element; the <h:dataTable> renders as an HTML <table> element, as well. The data elements are nested inside the <td> element, rendered by the <h:panelGrid>. So, set the vertical-align of the <td> of the <h:panelGrid> to top.
Assuming that the <h:panelGrid> has an id which ends up as <table id="panelGridId"> in HTML, use the following CSS:
#panelGridId>tbody>tr>td {
vertical-align: top;
}
Forms
If the grid is part of a form, then the CSS will need to include the form's ID. For example:
<form id="amazingForm">
<h:panelGrid id="amazingGrid">
...
</h:panelGrid>
</form>
The CSS will resemble:
#amazingForm\:amazingGrid > tbody > tr > td {
vertical-align: top;
}
Example
Here's an example HTML document that shows vertical alignment working within a table configured using CSS:
<!-- language: html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3547485</title>
<style>#myid>tbody>tr>td { vertical-align: top; }</style>
</head>
<body>
<table id="myid">
<tbody>
<tr>
<td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
</tr>
</tbody>
</table>
</body>
</html>
All get aligned to top. Without the rule, all get centered. It's hard to tell what rule exacty you need to apply since it's unclear how your generated markup look like.
Tutorials
See also:
HTMLDog CSS tutorial
CSSTutorial.net
you can use CSS to make the panelgrids to top align.
.mystyle {
vertical-align: top;
horizontal-align: center;
}
include in your xhtml files.
<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>
and add this code in parent panelgrid.
<h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">
Note:for 3 columns you hav to include it 3 times
You can avoid applying it to every td, only inside panelGrid and datatable inside that.
I had the same problem and the following worked for me:
.pgstyle td{
vertical-align: top;
}
Where pgstyle is the styleClass you give to every panelGrid contains a datatable, like:
<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
....
</rich:dataTable>
</h:panelGrid>
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 have a external css for reset that apply to all table, td, div, etc..
In my website, there is a customer template that allow user to create their desire content in html.
When view this customer template in webpage, I don't want to apply above external css.
So I put this customer template content into a div, and trying to exclude this div and all childs of it from css.
Is it possible to write css selector to select all table, td, div, etc... which are not child of given div id?
Below is my testing html code and reset.css
The content of div customtemplate is dynamic enter by user.
User try border=1 to table, it apply all table cell to border 1 without reset.css.
But with reset css, there is no border appears.
My users are not html/css professional, so they will create simple html and expect to display as they write in their test page.
If their html not appear exactly the same for all browsers, it is up to them.
I have no responsible for it. I just need to display their html in div without reset.css.
Anyway to solve ?
<html>
<head>
<link href="reset.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="customtemplate">
<table border="1" cellpadding="10px">
<tr>
<td>abcd</td><td>def</td>
</tr>
<tr>
<td>hello</td><td>world</td>
</tr>
</table>
</div>
<br><br>
<table>
<tr>
<td>default</td><td>reset</td>
</tr>
<tr>
<td>style</td><td>using</td>
</tr>
</table>
</body>
</html>
table, td {
border: 0;
padding: 0;
}
The right way would be to define YOUR defaults for that div. The reset CSS helps you avoid the problems that are caused by different default values in browsers. So for that div with the given ID, you should define some sensible defaults, which are different from the defaults used on the site, but still can be expected to be the same default on every browser.
For example:
/* reset.css */
p { margin: 0; }
/* yourdefaults.css */
#yourdiv p { margin-bottom: 10px; }
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 the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="background:black;height:100%;width:100%;">
<head>
<title>Report</title>
</head>
<body style="background:black;">
<table HEIGHT="100%" WIDTH="100%" style="background:red;">
<tr>
<td>
Search Area
</td>
</tr>
<tr>
<td HEIGHT="100%" WIDTH="100%" style="background:orange;">
<div style="overflow-y:scroll;height:100%;">
<table style="width:100px;height:1000px;">
<tr>
<td style="background:white;">
Results Area
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
But when I set the meta tag to use IE8 formatting by adding:
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.
Any help would be much appreciated.
This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.
You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.
Anyway, this layout can be achieved in easier way:
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.
Edit:
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
Generally speaking using tables for layout is discouraged, you should use CSS instead.
For example: http://jsfiddle.net/rf649/7/
HTML
<div id="search">Search Area</div>
<div id="results">Results Area</div>
CSS:
#search {
background-color: red;
position: fixed;
height: 150px;
width: 100%;
}
#results{
background-color: orange;
position: fixed;
top: 150px;
width: 100%;
bottom: 0;
overflow: auto;
}
You should set all margins and paddings for the parent elements to zero in order to get what you want.
Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)
Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.
To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.
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