View Full Version : Grid rendering is screwed

12 Oct 2006, 12:43 PM
Is nobody else having trouble with .32.2 in both IE & FF?

there's css issues in both FF1.5.0.7 and IE6, causing columns to get mashed to the left, rendering on top of each other. it's as if the column widths are 0.

the header renders fine.

I'm aware that container's height/width MUST be defined.

drag drop works.

I've tested using 3 different library includes:
the all-inclusive lib file "yui-ext.js"
by including all the atomic source files
copying slocum's includes.

same thing.
columns render on-top-of-each-other.

12 Oct 2006, 1:03 PM
Do you think you could try a different tone? If you need help I would be happy to help, but coming in here saying it is screwed etc is not good start.

Since there are quite a few people using this grid without a problem, did you ever thing maybe there's something you missed?

I responded to your comment in the blog post, but you must not have seen it. Here it is:

Without more details it's tough to figure out what the problem is. The two most common problems for people getting started are:
1. The container element the grid is being rendered into must a size defined. The grid automatically fits itself to the container element. If that container element has no size defined, there's nothing to fit to.
2. The grid cannot be rendered into an element with display:none. If you need to temporarily show the element before rendering. The reason is related to the problem above, when an element has a display of none it has no dimensions.
If it's not one of these two, please come into the help forums and post some code or a link and I will help you solve your issue.

I will add, if this is an update from a previous version - did you also update you grid.css file?

12 Oct 2006, 8:20 PM
>Do you think you could try a different tone?
>If you need help I would be happy to help,
>but coming in here saying it is screwed etc is not good start.

you're right sir, and I apologize. frustration and too little sleep.

I'm so looking forward to implementing your code into my apps.

I've made some progress and I'm diving into Grid, GridDD, DefaultColumnModel and GridView. this is some wonderfully written stuff.

I've found that I can hardcode my column widths via the following css I found:

The grid first check if a column style is defined as:
#your-grid .ygrid-col-0
if it doesn't find it, it uses one of the generic empty rules below.
If you have more than one grid on your page - you MUST define you columns
like above - #container-id .ygrid-col-0 and they must each be a separate rule

Drag and drop with the Grid - Part 2
I've just double-checked everything and I've cloned example2, using

my two grids are styled and laid-out pixelly perfect with yours.

I copied the html directly from your example as well:

- headers are correctly rendered.
- all columns on both grids are mashed left and rendered on-top-of-each-other (looks like chinese chars)
- dragging from ddgrid2 -> ddgrid3 leaves remnants behind. however, the rows are left correctly unselectable.
- dragging back from ddgrid3 -> ddgrid2 is kosher. the element get moved. no remnants.
- when column resizing on left grid (ddgrid2), the right-column header, named "Size", leaves an unmoved remnant of itself behind. again, the righthand grid is unaffected by this behaviour.

once more, Mr Slocum, I apologize for my poor tone earlier and I appreciate your prompt response.


13 Oct 2006, 1:44 AM
Can you put up a link that I can look at? That would make it much easier.

A couple of notes:

I've found that I can hardcode my column widths via the following css I found:

These rules are for text alignment, colors, etc. Widths specified in here will be overwritten by the grid.

For multiple grids on the same page, rules have to be defined where the grid can store it's positioning information. I suspect this may be the problem you are having. In ddgrid.css there is:

#ddgrid1 .ygrid-col-0 {
#ddgrid1 .ygrid-col-1 {
#ddgrid2 .ygrid-col-0 {
#ddgrid2 .ygrid-col-1 {
#ddgrid3 .ygrid-col-0 {
#ddgrid3 .ygrid-col-1 {

These are defining empty rules the grid can write it's positioning information into Unfortunately, they are required for multiple grids on the same page.

They must be defined exactly #gridid .ygrid-col-n and they can't be combined.

I've also found including a slightly modified reset-min.css (http://www.jackslocum.com/blog/css/reset-min.css) corrected some layout issues.

The link is definitely the best way to go as it allows me to look over everything quickly and check all the usual spots.


13 Oct 2006, 9:38 AM
here's the link to my example:


13 Oct 2006, 9:59 PM
installed your reset-min; no change.

bloody hell.

got your TabPanel working though. having css-crosstalk issues due to nested selectors. I've had this issue myself, where child a module's rules get trumped by the parent's, due to wide-spread use of names "bd", "hd", "ft".

so I extended TabPanel and spit out [div class="tabset-hd" /] instead.

RUtil.TabPanel = function(){
RUtil.TabPanel.superclass.constructor.apply(this, arguments);
YAHOO.extendX(RUtil.TabPanel, YAHOO.ext.TabPanel, {
createStrip : function(container){
var strip = document.createElement('div');
YAHOO.util.Dom.addClass(strip, 'tabset');
var stripInner = document.createElement('div');
YAHOO.util.Dom.generateId(stripInner, 'tab-strip');
YAHOO.util.Dom.addClass(stripInner, 'tabset-hd');
return stripInner;

I recall reading some css specs in the pipe, that would solve these crosstalk issues.


is it this rule that might be needed...?

E:first-child Matches element E when E is the first child of its parent.

the symptom for all this was: after rending an ext.TabMenu on a rendered and visible util.Panel , top-right corner of tab's background-image was being hidden. I found the image exposed when I added some padding to a containing element, I forget which. I gave up. I prefer to add corner-rounding with my javascript UI actors exec-ing this http://www.html.it/articoli/niftycube/index.html

.tabset .hd li a {background:#ccc url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/el/tb/tr_999.gif) no-repeat top right;}

neat code. dropped in seamlessly. removed my old tab-pane-in-the-ass code from include.

13 Oct 2006, 11:17 PM
Looking at your example url, you are missing ddgrid.css that defines the column selectors I described in my previous post:


Including that will fix your overlapping columns.

The tabset hd class - in fact all the tab css - is really nasty. It came from the YUI design patterns and using it was probably the worst decision I made in the library. That CSS creates more headaches than any other part of the library.

For an example of customizing the css:


13 Oct 2006, 11:21 PM
I included ddgrid.css at the bottom of grid.css

* ddgrid.css

#ddgrid1, #ddgrid2, #ddgrid3{
border: 1px solid #c3daf9;
#ddgrid1 .ygrid-col-0 {
#ddgrid1 .ygrid-col-1 {
#ddgrid2 .ygrid-col-0 {
#ddgrid2 .ygrid-col-1 {
#ddgrid3 .ygrid-col-0 {
#ddgrid3 .ygrid-col-1 {

13 Oct 2006, 11:32 PM
I am trying to save it to a local copy so I can try some stuff but it can't get it to save normal. Can you email the directory to me? jack.slocum AT yahoo.com

13 Oct 2006, 11:57 PM
This was an interesting problem.

You have this:

<div id="ddgrid1" class="ygrid-mso"></div>
<div id="ddgrid2" class="ygrid-mso"></div>
<div id="ddgrid3" class="ygrid-mso"></div>

But the grids are positioned absolute in containers in the example code on my blog:

<div style="height:280px;width:600px;position:relative;">
<div id="ddgrid1" class="ygrid-mso"></div>
<div style="height:280px;width:600px;position:relative;">
<div id="ddgrid2" class="ygrid-mso"></div>
<div id="ddgrid3" class="ygrid-mso"></div>

That change makes you actually have 3 grids.

Then the problem of the overlapping columns, change:

<style type="text/css" media="all">
@import url(js/yui/build/reset/reset-min.css);
@import url(js/yui/build/fonts/fonts.css);
@import url(js/yui/build/grids/grids.css);
@import url(css/grid.css); <--- that one


<link href="css/grid.css" rel="stylesheet" type="text/css" />

The grid apparently can't write to rules defined with @import.

After doing all that your third problem is going to be grids.css is overwriting text-align:center on everything. So in each of those column rules (i.e. #ddgrid1 .ygrid-col-0) you are going to need to set a text alignment to re-override the grids.css or you can set it globally like .ygrid-col {text-align:left;} you choice.

I also notice you are using XHTML strict. The components are all tested in strict mode (http://www.w3.org/TR/html4/strict.dtd), but I do not do any testing with XHTML.

14 Oct 2006, 8:31 AM
Bravo, Mr. Jack!

I'm up-an-running.

Thanks very much for your help.

I'll talk to you again soon, I'm sure.