Limitations on columns

20 views
Skip to first unread message

seven

unread,
Sep 29, 2009, 11:56:10 PM9/29/09
to jLayout
I'm using the demo example file to push the limits of the library and
it seems that the grid layout loses accuracy after 6 columns. It
doesn't seem to want to create anything between 6 and 12 columns. Did
I miss something in the documentation about the limits of how many
columns can be made?

Thanks in advance.

Bram Stein

unread,
Sep 30, 2009, 2:31:03 AM9/30/09
to jla...@googlegroups.com
Hello,

There is nothing inherent in the layout code that limits it to six
columns. I have just tried extending the column example to 20 columns,
and all show up in the location and size.

Could you show me the modifications you made to the demo file, so I can
help you fix the problem?

Thanks,

Bram

seven

unread,
Sep 30, 2009, 3:50:46 AM9/30/09
to jLayout
I appreciate your help. This is the screenshot of what I get in
Firefox 3.5.3 and IE 8.0.6001.18813

http://www.coldseatproductions.com/examples/jquery_jlayout_example.jpg

modification to the style from the examples.html

.grid, .flex-grid, .column, .border, .mpb, .nested-
center, .nested, .code {
overflow: auto;
margin:auto;
}

.c {
background-color: rgb(220,220,220);
border: 1px solid rgb(200,200,200);
text-align: center;
width: 75px;
height: 200px;
display: inline-block;
}


I added additional divs and 10 columns with a change in the horizontal
and vertical.

<div class="grid {layout: {type: 'grid', hgap: 10, vgap: 5, columns:
10}}">
<div class="c">
One
</div>

<div class="c">
Two
</div>
<div class="c">
Three
</div>
<div class="c">
Four
</div>
<div class="c">

Four
</div>
<div class="c">
Four
</div>
<div class="c">
Four
</div>
<div class="c">
Four
</div>

<div class="c">
Four
</div>
<div class="c">
Four
</div>
<div class="c">
Four
</div>
<div class="c">

Four
</div>
<div class="c">
Four
</div>
<div class="c">
Four
</div>
<div class="c">
Four
</div>

<div class="c">
Four
</div>
<div class="c">
Four
</div>
<div class="c">
Four
</div>
<div class="c">

Four
</div>
<div class="c">
Four
</div>
<div class="c">
Four
</div>
<div class="c">
Four
</div>

<div class="c">
Four
</div>
</div>

Bram Stein

unread,
Sep 30, 2009, 6:11:09 AM9/30/09
to jla...@googlegroups.com
Ah, I see what is happening. You ran into the piece of code that tries
to guess which direction you want the grid to be filled in: top to
bottom and left to right, or left to right and top to bottom. In your
case it "guessed" you wanted top to bottom and left to right, but
since you didn't have enough items, the grid didn't fill up to the
right completely, making it seem there were less column than you
specified.

I can't quite remember why I put that code in, but I realize now that
it was a bad idea. I've changed the code so that by default it fills
in a grid left to right and top to bottom. The grid layout now has an
extra optional parameter to choose top to bottom and left to right.
You can turn that on by setting the "fill" parameter to "vertical".
You can grab a copy of the latest code from my repository:

http://code.bramstein.com/hg/hgwebdir.cgi/javascript/raw-file/ade66c61669c/src/jlayout/jlayout.grid.js

This should be a drop in replacement for the old one, and should fix
the problem you were having without any modifications to your code. I
will release an official version later, but until then, you can use
this version. Thanks for reporting this issue to me.

Bram

seven

unread,
Sep 30, 2009, 2:54:16 PM9/30/09
to jLayout
That's awesome! Thank you for the fix, this is exactly what I needed!

On Sep 30, 4:11 am, Bram Stein <b.l.st...@gmail.com> wrote:
> Ah, I see what is happening. You ran into the piece of code that tries
> to guess which direction you want the grid to be filled in: top to
> bottom and left to right, or left to right and top to bottom.  In your
> case it "guessed" you wanted top to bottom and left to right, but
> since you didn't have enough items, the grid didn't fill up to the
> right completely, making it seem there were less column than you
> specified.
>
> I can't quite remember why I put that code in, but I realize now that
> it was a bad idea. I've changed the code so that by default it fills
> in a grid left to right and top to bottom. The grid layout now has an
> extra optional parameter to choose top to bottom and left to right.
> You can turn that on by setting the "fill" parameter to "vertical".
> You can grab a copy of the latest code from my repository:
>
> http://code.bramstein.com/hg/hgwebdir.cgi/javascript/raw-file/ade66c6...
>
> This should be a drop in replacement for the old one, and should fix
> the problem you were having without any modifications to your code. I
> will release an official version later, but until then, you can use
> this version. Thanks for reporting this issue to me.
>
> Bram
>
Reply all
Reply to author
Forward
0 new messages