Menu icon Foundation
Using row collapse... Space between columns.

Hello,

Let's say i have this markup:

<body>
    <div class="row collapse">
      <p class="large-4 columns test-table">
        test
      </p>
      <p class="large-4 columns test-table">
        test
      </p>
      <p class="large-4 columns test-table">
        test
      </p>
    </div>
</body>

Along with the following CSS, which sole purpose is to be able to see where each columns starts and ends:

.test-table {
  border:               1px solid red;
}

As far as i understand, shouldn't the columns be stuck altogether? i'm observing a small space between the center and last column, and i would like to understand why, so i can get rid of it (See attached picture).

Spaces

Can anyone give me some advices about this issue please?
Thanks!
Pierre.

rowcollapsecolumnsspace

Hello,

Let's say i have this markup:

<body>
    <div class="row collapse">
      <p class="large-4 columns test-table">
        test
      </p>
      <p class="large-4 columns test-table">
        test
      </p>
      <p class="large-4 columns test-table">
        test
      </p>
    </div>
</body>

Along with the following CSS, which sole purpose is to be able to see where each columns starts and ends:

.test-table {
  border:               1px solid red;
}

As far as i understand, shouldn't the columns be stuck altogether? i'm observing a small space between the center and last column, and i would like to understand why, so i can get rid of it (See attached picture).

Spaces

Can anyone give me some advices about this issue please?
Thanks!
Pierre.

Sergej Lotz over 5 years ago

Just tested this markup and css with foundation 5, it looks all right, no space between.
Seems to be browser/system problem, which combination are you using?

Pierre MARTIN over 5 years ago

Hmm strange. i'm on Safari 7.0.1 on Mavericks. The foundation version i'm using is based on the foundation-rails gem (In my Gemfile: "gem 'foundation-rails', '~> 5.0.0'").
Also, i'm using compass-rails, jquery-rails and angularjs-rails, but i don't think it's messing with foundation.

Pierre MARTIN over 5 years ago

Sergej, i will check the version of foundation the Gemfile is pulling, and will post it back here. Thanks for your time helping me!

Pierre MARTIN over 5 years ago

i just checked, the Gem is pulling 5.0.2.0. i'm not sure wether this reflects the same version as the underlying foundation framework being bundled within the gem... What version shall i use according to your experience?

Thanks,
Pierre.

Dave over 5 years ago

Same issue. Looks like it affects iOS 7 as well.

Sergej Lotz over 5 years ago

Just checked it on Safari 6.1.1 on macos 10.8.5 and got the same broken result, seems to be a Safari bug.

Pierre MARTIN over 5 years ago

Hi guys, and thanks for your help.

i have posted a question regarding this issue on SO (See http://stackoverflow.com/questions/20970347/zurb-foundation-and-row-collapse ).

@Sergej, by any chance, do you know if there is the same bug with older versions of Foundation?

Thanks a bunch!
Pierre.

Sergej Lotz over 5 years ago

I checked your example on foundation 4.3.2 – same result on safari

Ryan King about 5 years ago

Has anyone had any luck resolving this issue? I have Foundation 5 displaying the same gap as described above in Safari. Any tips or help would be greatly appreciated!

Marv Steigman about 5 years ago

Just confirming that it does affect rendering in Safari, iOS or otherwise.

Brian Ackerman over 4 years ago

The last column is always floated right to account for uneven percentage divisions. Add the "left" class to it to force the bit of space to hang on the right of the last column instead of the left.

Srđan Prodanović over 4 years ago

Im using foundation-rails (5.4.5.0) and the problem with it is, that it only includes the .collapse selector, but not media dependant collapse and uncollapse styles (.small-collapse, .medium-collapse, ...)