In JSF, I am using panelGrid which is equivalent to table in html. How to set height=100% in it? width=100% exists but not height. Thanks
Already tried. Doesn't work.
Prabhat
2010-06-23 09:12:33
Strange, could you try to see the page source if the height is 100%. Maybe you have a problem with your design. I mean if in the page source the height is 100%, then you have another problem.
Petar Minchev
2010-06-23 10:25:17
A:
To start, JSF is irrelevant here. It's now all about its generated HTML code. Open page in webbrowser, rightclick and view source. Concentrate you on that HTML source. That's all what CSS (and JS) can see and apply.
I assume that you mean with 100% height the full viewport height (the "visible" height). Now, to achieve full viewport height in CSS, only setting a height: 100% on the desired HTML element itself is not sufficient. It will be relative to its parent element, all the chain up to the <html> element. So if you basically have a:
<!DOCTYPE html>
<html lang="en">
<head>
<title>100% viewport height demo - FAIL</title>
<style>
.mytable { height: 100%; background: yellow; }
</style>
</head>
<body>
<table class="mytable"><tr><td>cell</td></tr></table>
</body>
</html>
It will be 100% of the height of the <body> element. The height of the <body> itself is in turn relative to the height of the <html> element. But the both elements doesn't have a height of 100%. Copy'n'paste'n'run it. You'll see, it does not cover the full viewport.
If you want to achieve a full viewport height, then you need to apply height: 100% on both the <body> and <html> elements as well (you of course also need to reset the margins).
<!DOCTYPE html>
<html lang="en">
<head>
<title>100% viewport height demo - GOOD</title>
<style>
html, body { margin: 0; height: 100%; }
.mytable { height: 100%; background: yellow; }
</style>
</head>
<body>
<table class="mytable"><tr><td>cell</td></tr></table>
</body>
</html>
Apply this knowledge on JSF as well. The h:panelGrid just renders a <table> element. Its styleClass will be rendered as HTML class attribute.
BalusC
2010-06-23 11:30:20