Questions tagged [zurb-foundation]

Foundation is a cross-device CSS framework, maintained by ZURB, for building both prototypes and production code.

Filter by
Sorted by
Tagged with
0
votes
1answer
19 views

Use {{Variable}} inside {{#each}}?

im using foundation 6.4 and I want to use a partial and fill it with data from my data.yml via each helper. The partial shall be used on multiple pages and I would like to use the front matter to ...
0
votes
1answer
37 views

nesting <button> inside <form> causes unexpected behavior

I'm using ZURB Foundation 6.4 (ZURB template) for my Website. I wanted to test out my newly implemented backend and tried to gather some input and send it to my php backend via jquery AJAX. ...
0
votes
1answer
12 views

How can I prevent foundation watch from adding html <header> stuff to my file?

Using foundation 6. When I have watch running, whenever I make changes to my index.html file, it puts a copy in the dist folder with an added section. I already have a and don't need this! How can I ...
2
votes
1answer
43 views

How to fix text-alignment

I'm currently working on a book management system. I want the description-text to be displayed entirely on the right of the cover-image but only one line is displayed to the right of the image and the ...
0
votes
0answers
9 views

Foundation basic template not applying styles

I used foundation-cli to create a new foundation project and selected Basic Template everything works well but when i change the generated index.html to use some demo html from https://foundation.zurb....
0
votes
0answers
16 views

Why my gulpfile.js doesn't compile only my Custom SCSS?

I have some problem Foundation CLI. My custom SCSS codes does not compile by Gulpfile.js. Interestingly, when I make changes in any HTML files or Foundation's own SCSS files, files is quickly ...
1
vote
1answer
61 views

How to retrieve data from PHP script via jQuery AJAX while using (webpack based) ZURB Foundation Framework?

So Im working inside a full blown ZURB Template project which was installed via the foundation client. I already finished some prerequisites like enabling ES7 Features async/await in Babel7 (ZURB ...
0
votes
0answers
30 views

Possible to import jquery event listeners?

I'm fiddling around with JS integration in the ZURB foundation 6.4 Framework (ZURB Template). I've figured out some basic knowledge about importing and exporting JS modules with both CommonJS and ES6,...
2
votes
0answers
37 views

why does using “async” inside of “module.exports” cause: Type Error: “exports” is read-only

I have the following, experimental code: //JS File which exports function consoletest(){ console.log("HelloRequire!") } function commonAJAXCall(){ return $.get('https://jsonplaceholder.typicode....
1
vote
0answers
44 views

TypeError: “exports” is read-only => When exporting a module with method calling another method

I'm new to webpack and this module bundler stuff and I'm currently just experimenting around what's possible and what isn't. Here, I'm trying the following: //appECommerce.js import eCommerceLogic ...
0
votes
0answers
15 views

How to call function from another JS File A inside JS File B with ZURB Foundation/webpack?

Im using ZURB Foundation 6.4 (ZURB Template) which is webpack4 based and I have a function helloAsync() inside JS File A which is being called by getProductnameElements() inside JS File B. Both JS ...
1
vote
0answers
19 views

How to add custom arrow for li a tag on Zurb-Foundation drilldown - dropdown?

Do I need to set custom arrow right for li a tag? How do that? I set my code to code pen and set a link to show you look: https://codepen.io/pen/?editors=1010 I need to add my style for the arrow. I ...
0
votes
0answers
32 views

How to show drop-down content on hover or on click?

How do I hide the drop-down button to the hover or click to display it? I specifically use foundation zurb plugin. Look my code: HTML: <ul class="menu" data-drilldown data-back-button='<li ...
0
votes
0answers
11 views

Add babel polyfill for ES7 support in webpack on a ZURB foundation project

Ive already read this great answer on SO Babel 6 regeneratorRuntime is not defined (Is it still up to date? The answer dates back quite a few years and I dont know if the recent edits kept the answer ...
0
votes
0answers
11 views

Make AJAX call to db.json from custom JS file in ZURB Foundation

Im working with foundation 6 and I'm trying to call my mock-backend (JSON server). The call is happening from my custom.js file which was required inside my app.js file which again is integrated on ...
0
votes
0answers
14 views

How to center horizontally & vertically with with XY grid?

Can please someone help with positioning in the absolute center (horizontal and vertical) a very simple form? <form> <div class="row"> <div class="small-1 columns"> <...
0
votes
0answers
28 views

Foundation Reveal trigger buttons not firing after AJAX filter results (search & filter pro)

I have a product filter on a Wordpress website (using search & filter pro plugin). For each product I have a "buy now" button that triggers a modal via Zurb Foundation "Reveal". It works fine, ...
2
votes
2answers
30 views

Why does my mobile menu on this site work on browser but not on actual mobile device?

My mobile menu works fine on desktop browser but not actual mobile devices. I have tested it on Chrome, Safari and Firefox. I have already tried Menu appearing on mobile view in desktop browsers but ...
0
votes
1answer
30 views

Installing 3rd party JS plugins via npm INSIDE foundation project creates errors

I'm new to projects using NodeJS and npm. I'm fiddling around with foundation CLI in Foundation 6.4, and Im trying to install 3rd Party JS plugins, in this case chart.js https://www.chartjs.org/ So ...
2
votes
2answers
120 views

Foundation tooltips: elem.getAttribute is not a function

I'm adding the following HTML snippet to my Angular 7 app, in order to add a tooltip to an element (modified from Foundation's docs): <span data-tooltip data-options="hover_delay: 50;" ...
-1
votes
1answer
23 views

How to scroll instead of next line using the default class=“menu” in foundation?

I wanted the menu to be scrollable in smaller screens (side or x-axis) instead of menu items starting a new line. I tried setting overflow-x to auto and scroll. But the menu still starts a new line. ...
0
votes
0answers
17 views

Foundation: Dropdown menu open by default

I am using Foundation in a project and in the top I have a button to open my menu, my logo and others as ilustrated in the figure. However now I believe that my dropmenu would be better to stay open ...
0
votes
1answer
20 views

function from required JS file is not defined

I have this little function: function nullifyLorem(){ document.getElementById("loremIpsum").innerHTML ="loremNullified" } it is from the file "custom.js" which resides in root/assets/...
0
votes
0answers
14 views

Zurb classes not working even after installing foundation-sites and settig up the app

I installed foundation-sites and jquery using npm, because I want to implement Zurb into my React app. But the class names do nothing to the web and they don't seem to be working. I tried adding Zurb ...
0
votes
0answers
11 views

Cannot insert code into link on zurb email foundation

Hi guys I am creating email notification templates on zurb foundation which are then used via Nintex Workflow. I am trying to add a link like <a href="{Common:WebUrl}/_layouts/15/WrkStat.aspx?...
0
votes
0answers
12 views

Stackable.js and Foundation ToolTips?

Issue happens if using the Foundations (tooltips) within a table that also uses (stackable.js). If the tooltip is embedded in a stackable table, it will not work if viewing on smaller screens. I ...
0
votes
0answers
6 views

How can I use AJAX with Foundation 6 OUTSIDE of reveal modals?

Im new to foundation 6, but Im already very amazed by it and used several of its cool handlebar functions like the each, if and of course tons of partials like the building blocks. Now, so far I've ...
0
votes
1answer
17 views

Zurb Foundation 6 - Reveal modal won't reopen after close

I am using a reveal modal and populating it using AJAX, following the recommended methods in the Zurb Documentation to do so. The modal appears and populates OK, but if I then close the modal (e.g. ...
0
votes
0answers
3 views

Using float (disable xy) grid with foundation 6.5.3

To use the Float Grid in Foundation v6.4+, you need to: In CDN link or package managers: import foundation-float.css in place of foundation.css. In Sass: set both $xy-grid and $global-flexbox to ...
0
votes
1answer
16 views

“foundation” command is not known outside nodeJS folder

I had to install NodeJS and subsequently foundation CLI (V6) without admin rights through the Shell. Everything worked perfectly fine first, but once I closed the shell and reopened it, I couldn't ...
0
votes
0answers
43 views

Foundation Building blocks - missing JS?

So I'm trying out some of the building blocks from ZURB Foundation. Im using the "copyPasta" approach for implementation, so Im just copying the code on their website to my sourcecode and thats it. ...
0
votes
0answers
73 views

Zurb Foundation rendering binary output for database image

I have a Web API action db-image that returns a HttpResponseMessage object with image bytes fetched from database: HttpResponseMessage result = new HttpResponseMessage(); BinaryImage image = GetImage(...
0
votes
0answers
25 views

Using Zurb-Foundation with Flask?

I am using Flask to develop an application. I have decided to use as a front end framework Zurb-Foundation. I have found that there is a Flask-Zurb-Foundation. According to the docs to use it all you ...
0
votes
0answers
12 views

ZURB Foundation XY-Grid grid-y - responsiveness to small height of viewport?

I have this markup including the Foundation 6 classes: <div class="grid-container"> <div class="grid-x grid-padding-x"> <div class="large-12 cell"> <h1>Welcome to my ...
0
votes
1answer
59 views

Display Modal on Successful Form Submission

I'm using a Kentico form to collect some data and I'd like to display a Foundation modal upon successful submission. We have some validation on the fields and we'd prefer to use an update panel to ...
0
votes
0answers
9 views

How can I make a border around multiple rows in Foundation for Emails

I would like to add a border with padding around a group of rows, like in the attached image. Right now, the grey border is a I created that surrounds all the rows/columns and goes right up against ...
-1
votes
1answer
22 views

Google chrome on android zooms page out on: open off canvas menu

have created a quick test off canvas menu in zurb foundation, works great except: On every other browser, than chrome (both ios and android) tested: (http://prntscr.com/obpii6) it looks like it should....
0
votes
1answer
58 views

Node App works on Heroku Local but crashes on Heroku server. using simple Foundation template project

I am trying to deploy a Foundation web app based on Yarn, Gulp and Node.js on Heroku. It works with heroku local web but crashes on the Heroku server. I have set the port correctly. I am trying to ...
0
votes
0answers
16 views

What should be passed to 'data-append-to' plugin option to make foundation reveal inject into custom div?

Here is my structure(stripped down to demonstrate the issue): <html> <body> <form> <div class="siteContainer"> <div class="reveal-modal" data-...
3
votes
1answer
30 views

Orbit slider fails to animate after adding DOM element dynamically

I basically have a slider on my page which runs fine as soon as it loads. The issue presents itself when I reload orbit-container after DOM loads and appending new data. Basically, the method is ...
0
votes
1answer
22 views

How can I import css from a node module?

I'm using ZURB Foundation CLI and I can't figured out on how to import css/scss files from node-modules folders.
0
votes
1answer
19 views

Foundation 6 dropdownmenu styling is missing

using foundation 6 trying to generate a dropdwon menu, have copied their example code (from here: https://foundation.zurb.com/sites/docs/dropdown-menu.html) but it doesn't seem to be working at all. (...
0
votes
0answers
11 views

<ul> menu class not working in Foundation 6?

I am attempting to make a basic submenu in the footer of my site including some important site links. however when using the .menu class my menu does not go inline, it remains vertical? Could anyone ...
0
votes
0answers
23 views

Foundation Abide Custom validation with Select Dropdown

I need to provide custom validation on select boxes using Foundation Abide based on the value selected. I have a select dropdown which is generated dynamically with values being integers or ids from ...
0
votes
0answers
13 views

How to get equal margin gutters with Foundation XY-Grid

I want to create an XY-Grid with equal gutters even though the cells are separated in different grids following each other. I also want the margin on each side when using a ".grid-container.fluid" to ...
0
votes
0answers
27 views

Setting up Phoenix 1.4 + Webpack + Zurb Foundation

How do I setup Zurb Foundation css framework on Phoenix 1.4 + Webpack? Unfortunately I have not been able to find any example anywhere ... mix phx.server starts fine without errors with webpack ...
0
votes
1answer
9 views

Zurb Foundaion CLI not recognizing Zurb Stack on basic theme

I am new to Foundation and I am having issues installing blocks through the Foundation CLI. The install doesn't seem to notice the stack and keeps downloading the block as a zip C:\Users\user\site>...
0
votes
1answer
39 views

foundation json issues with panini

Under my src in foundation, I have a data, created new json file. When I tag it with {{file}}, doesnt show in my index. html when I do npm run start. I did, data: src/data added gulp watch no results....
0
votes
1answer
50 views

How to evenly distribute cell height in Foundation XY-grid (flexbox)

Using Foundation XY-grid, and specifically a nested grid-y inside a cell, I want to use the class .auto on the parent cell to distribute the cell heights evenly, in the case of a grid-y with 2 cells ...
0
votes
0answers
29 views

Package Electron app with dependent packages such that only the dist/ folder of each package is included

For instance, an Electron app that I'm building uses Zurb Foundation whose npm module is ~25MB. The app itself just uses their CSS and JS files. So while creating the distributable package, I would ...