View Full Version : Column width messed up when I have 2 grids together

3 Feb 2007, 11:30 AM
I am a new user of yui-ext. I created 2 simple grids based on the following html nodes:

<div style="position:relative;float:left;height:250px;width:1200px;margin-bottom: 20px;">
<div id="mappingTbl" style="margin-right:20px;width:390px;height:225px;"></div>
<div id="customTbl" style="width:620px;height:225px;"></div>

And the columns don't show up with the correct width. Furthermore, when I resize the last column in the first grid, the first column of the second grid is also resizing!

I am using the latest yui-ext build. I tried with the version Jack used in his dragdrop grid example, and it did not happen, so something must have changed since then to trigger this.

3 Feb 2007, 12:01 PM
Please make an attempt to read older posts before posting a new question. This is probably the most common question raised and answered. Your css entries are not correct. Please read the FAQ and or search for addtional posts related to multiple grids.

3 Feb 2007, 12:15 PM
Thanks for your reply. Are you talking about the FAQ link on top of this page? It is all about how to use this forum.
Yes, I did try to search for 'grid' or 'multiple grid' or 'column' in the forum, but got nothing back. Please give me more info on how to use it more efficiently.

3 Feb 2007, 12:58 PM
OK, so finally found the FAQ you were referring to, although I could not find a direct link from either homepage or documentation page. Anyway the search feature in this forum sucks. I had to search "grids" instead of "grid" to see anything. And when I goes into one of the search result, the browser back button doesn't bring me back to the search list. :-(

3 Feb 2007, 2:11 PM
Yeah, I don't know what the deal is the with the forum software - search has never worked right. You're better off going to google http://www.google.com/coop and setting up a personal search that just searches this url.

Jack is there anyway to just build one of those and put a link to it at the top of the forum page?

28 Feb 2007, 5:36 PM
hi I am a new user of yui-ext too
i creat 3 grid , and use yui-ext0.33,i got the same question with your
multi grid how to build it?
do you have any solution for it,

i am not very smart , english is not good too
so less word to convey question,please don't mind

if you have solution please send me , thanks

1 Mar 2007, 3:42 PM
To all above posters...

What you describe is NOT a bug. It is actually documented. I'll try to summarize...

if you have only one grid in your page, CSS provided by Jack works OK.

For all other grids, you have to create your own CSS. It really is very simple, you just need to provide for appropriate classes.


1) a page with two grids.
2) grid1 uses the CSS provided by Jack
3) grid2 uses the CSS provided below (assumes a 4-column grid)

* grid2.css

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
#grid2 .ygrid-col-0{
#grid2 .ygrid-col-1{
#grid2 .ygrid-col-2{
#grid2 .ygrid-col-3{

#grid2 .ygrid-header-0{
#grid2 .ygrid-header-1{
#grid2 .ygrid-header-2{
#grid2 .ygrid-header-3{

The comment above is actually inseide the CSS provided by Jack. Open it and read it.


Of course, if you like to style your grid differently you have to provide the defintions yourself. Again, using Jack's CSS should get you off the right path.


2 Mar 2007, 12:00 AM
Time to disable downloading of yui-ext 0.33, and insist on new users using the Ext 1.0 Grid which creates its own CSS. :!:

2 Mar 2007, 11:59 AM
I hate "me too" posts, but +1