I'm getting nowhere with this.

I have a view on a content type showing only a CCK text field, with several records returned.

I must be missing something fundamental because whatever I do what I'm getting the text taking the full width of the content area.

Eg...
Three text records of width 80px in a content area width 600px results in the first being put on the left (fine) but the text goes to the end of the content area (width 600px). The second record is aligned alongside the first some 80px in, ie sitting on top of text from the first, with a width of 520px. The third is another 80px along with a width of 440px.

It looks the same on Firefox, Chrome and Opera. In IE7 the content just comes one after the other taking the full width.

The containers are of the form,

<div class="views-fluidgrid-item" style="position: absolute; top: 0pt; left: 160px;"><div class="views-fluidgrid-item-inner">...

Firebug shows no views-fluidgrid-item class nor anything with the width.

What am I missing?

Thanks, Nick.

CommentFileSizeAuthor
#2 masonry.jpg57.32 KBnickrice
#2 masonry.jpg57.32 KBnickrice

Comments

mohammed j. razem’s picture

mohammed j. razem
Location Santa Clara, CA
commented

Can you try the latest release? 6.x-1.3

nickrice’s picture

nickrice commented
StatusFileSize
new masonry.jpg57.32 KB
new masonry.jpg57.32 KB

The same is happening. See attached jpg from Firefox 3.6.

Could it be theme dependent? I'm using a Zen subtheme that I haven't done anything with to make look pretty yet.

Or perhaps I'm just doing something dumb?

View style options:
Grouping field: none;
Single mode: tried both true and false - makes no difference;
Column width: 120;
Resizable: tried both true and false - makes no difference;

Each brick is wrapped in (with appropriate "lefts"):
<div class="views-fluidgrid-item" style="position: absolute; top: 0pt; left: 240px;">
<div class="views-fluidgrid-item-inner">

The contents of views_fluidgrid.css is:
div.views-fluidgrid-wrapper,
div.views-fluidgrid-item-inner {
position:relative;
}

Should I add anything to that?

mohammed j. razem’s picture

mohammed j. razem
Location Santa Clara, CA
commented
Version: 6.x-1.2 » 6.x-1.x-dev
Status: Active » Closed (works as designed)

This is a normal behavior since jQuery Masonry uses absolute positioning to create the layout; you should specify a width for rows. Otherwise the layout will NOT be understood by jQuery Masonry.

Though you can specify different widths for elements, for instance:

.views-fluidgrid-item .odd {
  width:320px;
}
.views-fluidgrid-item .even {
  width:500px;
}

That's when you have to turn the Single mode to Off.

"I will note that in next release's README.txt documentation."

betoaveiga’s picture

betoaveiga
Primary language Spanish
Location Daule, Guayas
commented

-UPDATE- This didn't work... Just use CSS to give a with to your colums... --

In order to not use CSS and still have a synchronized width with my fluid grid options I wrote this in my footer:

<script>
  $(window).load(
    function () {
      $('.views-fluidgrid-item').css('width',
        $('.views-fluidgrid-item:nth-child(2)').css('left')); 
  });
</script>

This little script waits until the page is loaded completely, then it looks for the relative position of the second element (which is the width option of our fluid grid) and then it assigns a width to all columns with this value.

Hope that helps somebody!

g.k’s picture

g.k commented

@BetoAveiga, you saved my day! Thanks for the snippet