PDA

View Full Version : CSS Splitbar/Grid Best Practicses



byuva
11 Oct 2006, 8:52 AM
I am struggling a bit with CSS in general and particularly Splitbars and filling them with grids. It seems the key for any web abb is to create a page that fills the screen (you should never have able to scroll the actual app) and then split it into portions that you fill with content (perhaps tabs and grids). The content should fill each portion and resize properly when scrolled (with scrollbars for each portion if necessary). Absolute widths and heights (or ranges) should be honored and the rest adapt accordingly. It seems simple enough but I am really struggling with getting this properly implemented.

I add content to a portion of a splitbar page and find that the whole page now won't fit on the screen. I tell the grid div to be 100% width and height (ie fill out whatever space would have been allocated based on the splitbar limitation) and it somehow blows out the width and settings of all the other split portions. Could someone simply lay out what CSS and HTML you need to split up a screen and fill each portion with content, say a grid? The splitbar blog entry doesn't really show how to fill the sections and the forum2 has enough other stuff going on that I am struggling to tease out the relevant portions.

Here is some example of some code of mine that I think should work but illustrates several of the problems I am having.


<DOCTYPE>
<html>
<head>
<meta>
<title>Test</title>


<script></script>
<script></script>

<link>


<style>
body {margin:0px;}
td {font:normal 9pt arial; margin:0px;}
#leftPane{
width:200px;
vertical-align:top;
padding:5px;
}
#hsplitter{
width:4px;
background:#6593cf;
}
#vsplitter{
height:4px;
background:#6593cf;
}
#bottomPane{
height:200px;
vertical-align:top;
padding:5px;
}
#topPane{
vertical-align:top;
padding:5px;
}

html, body {
height: 100%;
}
</style>

<script>
var Example = {
init : function(){
var YSB = YAHOO.ext.SplitBar;
var split1 = new YSB('hsplitter', 'leftPane');
split1.minSize = 100;
split1.maxSize = 600;

var split2 = new YSB('vsplitter', 'bottomPane', YSB.VERTICAL);
split2.minSize = 100;
split2.maxSize = 400;

var dataModel = new YAHOO.ext.grid.XMLDataModel({
tagName: 'Document',
totalTag: 'TotalCount',
id: 'doc_id',
fields: ['filename', 'md5', 'ctime']
});

var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var myColumns = [
{header: "Filename", sortType: sort.asUCString},
{header: "MD5", sortType: sort.asUCString},
{header: "ctime", sortType: sort.asDate}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
colModel.defaultSortable = true;


// create the Grid
this.grid = new YAHOO.ext.grid.Grid('grid-example', dataModel, colModel);
this.grid.getDragDropText = function(){
var count = this.getSelectionCount();
return count == 1 ? '1 selected item' : count + ' selected items';
}
this.grid.enableDragDrop = true;
//this.grid.autoSizeColumns=true;
this.grid.trackMouseOver=true;
this.grid.render();
dataModel.addListener('load', function(){
this.grid.getView().autoSizeColumns();
this.grid.getSelectionModel().selectFirstRow();
}, this, true);
dataModel.load('yui.xml');
}
}

YAHOO.util.Event.on(window, 'load', Example.init, Example, true);
</script>

</head>
<body>
<table>
<tr>
<td>
Left content goes here. This is the fixed size pane for the horizontal SplitBar.

Minimum size is set to 100 and maximum size is set to 600.
</td>
<td>
</td>
<td>
<table>
<tr>
<div></div>
</tr>

<tr>
<td></td>
</tr>
<tr>
<td>Bottom content goes here. This is the fixed size pane for the vertical SplitBar.

Minimum size is set to 100 and maximum size is set to 400.</td>
</tr>
</table>
</td>

</tr>
</body>
</html>

jack.slocum
11 Oct 2006, 9:52 AM
It's the table. The only browser the table is going to work right in is IE, in every other browser it will fail. Tables have their own resizing algorithms and generally don't respect sizes you give them.

Without the table you are left with really only 1 option and that is resize handlers + javascript. There a lot of other solutions out there but none of them (that I have found) work correctly with a constrained HEIGHT as well as width.

I would recommend looking at the html/css/script here http://www.jackslocum.com/forum2/ as it is pretty simple and does most of what you are looking for.

sambar
30 Mar 2009, 9:46 AM
Jack,

This link is broken, can you please update.. this is exactly what i was looking for....

Thanks,
Jeevan