Menu icon Foundation
Whats wrong with my footer?

Hi I have a simple horizontal lined footer which I used in an other layout before and which is not working any more in a new layout. I do not see what's wrong here maybe one of you guys can see the problem? It was supposed to line horizontal not vertical like it does now? Thanks.

https://codepen.io/mr_vespa/pen/eGOoGv

 

Thanks W.

footer

Hi I have a simple horizontal lined footer which I used in an other layout before and which is not working any more in a new layout. I do not see what's wrong here maybe one of you guys can see the problem? It was supposed to line horizontal not vertical like it does now? Thanks.

https://codepen.io/mr_vespa/pen/eGOoGv

 

Thanks W.

Wiechert Hooghwinkel 5 days ago

Any thoughts on this?

 

Thanks W.

Sven CAILTEUX 5 days ago

I only got horizontal lines in your example...

Wiechert Hooghwinkel 5 days ago

Hi the lines are fine but the columns are not side by side so it should have 4 columns in a row not  under each other!

Wiechert Hooghwinkel 4 days ago

 It looks like the foundation grid is not loaded or applied? First I thought it was only the footer but now I have some other parts not working were also two or tree columns are coded.

Now lets see why the grid is not working any more?

I have these files included in my CMS:

 

 page.includeCSS.foundation = {$resDir}/Public/foundation-6.4.2-complete/css/foundation.css 

page.includeCSS.app = {$resDir}/Public/Css/app.css

page.includeJSFooter.jquery = {$resDir}/Public/foundation-6.4.2-complete/js/vendor/jquery.js
  page.includeJSFooter.foundation_js = {$resDir}/Public/foundation-6.4.2-complete/js/vendor/foundation.js
  page.includeJSFooter.foundation_app_js = {$resDir}/Public/foundation-6.4.2-complete/js/app.js 
 

Am I missing some files?

 

Roy Six 4 days ago

Hi Wiechert, it seems like you're using a default 6.4.2-complete download build, right? The complete build switched over to the xy-grid in recent versions, so definitely make sure you are using the xy-grid class names ("grid-container", "grid-x", "cell"), and not the legacy float grid classes ("row" "column"). In your codepen (first post), it's using row and column, so that's why I bring it up.

Also, your codepen isn't working right because it currently doesn't have any Foundation CSS or JS sources, so you should click the "gear" icons next to the CSS/JS sections to add them in.

Lastly, for "completeness," I think you're missing what-input.js for your Foundation JS includes, which should be found in the complete build under the vendor folder (but it's not needed to make the grid work).

vinodkumar 4 days ago

Thanks for the excellent feedback. Would be interested in knowing what topics would be helpful for you in the future, too.

Also download Cinema Box App to watch movies online

Wiechert Hooghwinkel 3 days ago

@Roy thanks for the great help. It helped me solve the problem. I use the floating grid in my html and that's why it did not work with the x.y version applied. Which version would be best to use for future projects anyway? I have to read up about the x,y grid and how to use that. Any good tutorial around here or on the net?

What is the what-input.js for? Can I do without it?

Also nice to know how to use the "gear" thing in Codepen. I was always curious how others applied stuff in their Codepen, now I finally know :)

 

W.

Roy Six 1 day ago

Glad to hear Wiechert. I would start using the xy grid for sure, it is now the default grid and I think what the developers want us to move to in the future.

what-input.js is mainly for differentiating between keyboard and mouse input, and I think foundation uses it for styling purposes to only give outlines to inputs when you use keyboard (e.g. focus) and not the mouse click (according to this post). I guess it's really an optional thing and not needed for core foundation.

Happy developing!