0

I am new at foundation zurb. So, I have a rails app with foundation-rails gem installed. And I am testing out some sample codes from the foundation doc.

Here's what I got:

<div class="row">
  <div class="small-2 large-4 columns test1">small2 large4</div>
  <div class="small-4 large-4 columns test1">small4 large4</div>
  <div class="small-6 large-4 columns test1">small6 large4</div>
</div>
<div class="row">
  <div class="large-3 columns test1">large-3 columns</div>
  <div class="large-6 columns test1">large-6 columns</div>
  <div class="large-3 columns test1">large-3 columns</div>
</div>

Like in the documentation, I would expect the inner divs line up in a row (12 columns in total), but for some reason I am getting something like this, the inner divs are stacked up on top of each other. I added custom css .test1 to give it an outline so that it's easier to see where the borders are. I have tried tweaking classes around, resizing browser and all, but the columns always stack up as 3 rows instead of one row. This screenshot is taken with browser view maximized.

Any insight?

sample

UPDATE (SOLVED):

So, it was indeed my ActieAdmin that's conflicting with Foundation. After looking around, this other thread on stackoverflow gave me the solution.

Rails Active Admin css conflicting with Twitter Bootstrap css

Essentially just move ActiveAdmin css file (app/assets/stylesheets/active_admin.css.scss) to (vendor/assets/stylesheets/active_admin.css.scss)

That fixed it!

Community
  • 1
  • 1
obelus
  • 115
  • 1
  • 10
  • jsfiddle please .... jsfiddle.net, if you are new to jsfiddle... – Vishwanath Aug 10 '14 at 16:36
  • how do add the gem on jsfiddle? Actually I tried jsfiddle by using external foundation cdn, the columns line up in a row. it's only acting this way on my rails app. So I guess it's something about the gem or the setup that is not right? – obelus Aug 10 '14 at 16:39
  • If the problem is not reproducible on the jsfiddle that means you have something in ur CSS that is messing this up. If you can share your public site URL for looking at, that can be of help.. – Vishwanath Aug 10 '14 at 16:49
  • You wouldn't be able to add the gem on JSFiddle, the CDN version is the closest you'd be able to get. All the same I'd suggest experimenting there with as much of your markup as you can add and all your own CSS. I've tried your markup out with Foundation and not been able to reproduce the issues but I suspect it's an issue with the markup or some conflict with your CSS rather than the gem. – James O'Neill Aug 10 '14 at 16:51
  • Actually I notice you have margin underneath your columns. Do they also have any left or right margin? This _could_ be the source of the problem. – James O'Neill Aug 10 '14 at 17:01
  • Oh, they are not supposed to have any margin? I didn't know that. I can't check if there is any right/left margin since I can't line up my columns. But you might be on to something. I do have ActiveAdmin on my rails app, which comes with its own css. That might be something that's messing it up. I should find out how to ignore that on foundation and see how it goes. – obelus Aug 11 '14 at 01:47
  • It was indeed ActiveAdmin! I'm gonna update my post with solution now. Thanks guys, your replies lead me to an answer. :) – obelus Aug 11 '14 at 03:52

0 Answers0