Questions tagged [zurb-foundation]
Foundation, created and constantly updated by ZURB, is an unparalleled CSS framework that facilitates the development of prototypes and production-ready code across multiple devices.
Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...
I'm attempting to install Foundation 6 CLI but I keep encountering this error: https://i.stack.imgur.com/yr0AI.png Can someone please assist me in figuring out what's causing this issue? Thank you. ...
I am in the process of developing a portfolio website where I want to fetch partial HTML files using an AJAX request. Here is the basic structure of the HTML: <div id="portfolio"> // Content will be replaced here </div> <a ...
On my desktop, I have a layout like this: [Column1 large-8] [Column2 large-4] For mobile view, I'd like it to be like this: [Column2 large-4] [Column1 large-8] Below is the code snippet I am working with: <div id="search-content" class="row ma ...
I recently encountered an issue that has been discussed multiple times here, but unfortunately, I couldn't find a suitable solution. After formatting my disk and installing macOS Monterey, the following software versions were installed: node.js v16.14.2 ...
Running Windows 10 (64 bit) with Node v13.0.1 and npm 6.12.0, I encountered an issue while attempting to install foundation-cli globally. When I run the command "foundation new" or "foundation -v", I receive the error message "ReferenceError: primordials ...
I am encountering a problem with getting Abide to function properly on a modal form in Foundation 5. The form is triggered by: <a href="/admin/edit_customer/<?= $order->id ?>/<?= $order->cust_id ?>" class="button tiny" data-reveal-id ...
My vertical tabs are giving me trouble when I try to nest grid or block elements, causing everything to overflow outside the element. For example, in the image below, the numbers 1,2,3 should be in the right section. <div class="row"> <div class ...
According to the information provided on this website, it is recommended to enclose the top-bar navigation within a div element that has both the class "contain-to-grid" and "sticky". However, I have noticed that while the "contain-to-grid" class exists in ...
For wide displays, I aim to give a distinct border to each 7th element. However, on smaller screens, I wish to apply these styles to every 4th element instead. Is there a way for me to nest my styles within .small, .medium, and .large classes? ...
This is the content of my webpack.config.js file: var webpack = require('webpack'); var path = require('path'); process.env.NODE_ENV = process.env.NODE_ENV || 'development'; module.exports = { entry: [ 'script!jquery/dist/jquery.min.js', 'script!f ...
I've been attempting to incorporate Zurb Foundation's scripts into my next js application, but I keep encountering an error message when trying to include the Foundation core. The error I'm seeing is: /Users/alasdair_macrae/Sites/merlin/spa_ ...
Recently delving into the world of Foundation Framework, I've just begun utilizing it for my projects. My current task involves crafting a responsive design with the help of the Foundation Grid system. Specifically, I've set up a grid layout for desktop s ...
After successfully installing Foundation 6 Zurb Template via the cli, I encountered no issues. I then added the missing babel install and everything worked fine online. However, BrowserSync does not seem to work offline. Upon initiating watch, I receive a ...
I'm facing an issue regarding the height of an li element. Check out this CodePen link for reference. <div class="row fp-gallery"> <ul class="large-block-grid-4 medium-block-grid-4 small-block-grid-2"> <li> <a href="#"&g ...
Currently, I am working on implementing a like model within a Rails application. In order to display which user liked the bonus, I have incorporated foundation tooltip. Below is the code snippet: - avatars = bonus.like_user_avatars.map { |avatar| image_t ...
Struggling to make the reveal modal open from the bottom of the window. Any assistance would be highly appreciated. I've been attempting to tweak the open function with the reveal js, as seen in the original code below. Thank you, P open : function (tar ...
On my single page website, I am utilizing Zurb Foundation's fixed topbar which includes anchor links to different sections of the page. My goal is to have the mobile menu close automatically whenever a link inside it is clicked. As it stands now, whe ...
I'm currently working with Zurb Foundation alongside Sass Compass, though this issue can extend to any CSS framework. Here's an example of the code I have: <div class="row"> <div class="small-6 column">...</div> <div class="s ...
I'm having trouble with the hover effect inside the orbit slider. It's not working at all. What am I missing here? Check out the code and fiddle: http://jsfiddle.net/Bonomi/KgndE/ This is the HTML: <div class="row"> <div class="la ...
Would it be possible to achieve this effect using Foundation: https://i.stack.imgur.com/UyYqK.png ? I am interested in implementing 2 COLUMNS in the TopBar Menu: foundation.zurb.com/docs/components/topbar.html I came across a MegaMenu (codepen.io/winghou ...
I'm in the process of incorporating sections to develop a navigation system on a basic webpage. However, I require it positioned on the right side of the screen. The default arrangement generated by Foundation with the use of "vertical-tabs" is "tabs on th ...
Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow"> ...
Currently, I am working on a project that involves handling the login/register process through modal boxes. When the login button is clicked, a modal box appears with a form inside. I am using Foundation 5's reveal modal to display my login form. However, ...
While viewing on desktop, the body is centered which is ideal. However, resizing the browser causes it to stretch to fit the full width and I want to avoid this. Regardless of the browser size, I want the first div with the "row" class to be centered with ...
Currently, I am in the process of learning Foundation framework and I have encountered some issues with my code. My goal is to display images for different devices such as mobile, tablet, and desktop. However, despite double-checking the path to the images ...
I have a CodePen example showcasing the Zurb Foundation grid. I am looking for a way to make a div extend to the right edge of the viewport while keeping the left edge in line with the grid as the viewport is resized. <div class="row"> <div cla ...
Currently facing an issue with the scaling of the viewport on certain mobile devices when loading new content via ng-include in our responsive website built on Foundation. The problem arises as the width of the page breaks, leading to horizontal scrolling. ...
Looking for a solution to make a background image fill a div entirely? Here is the CSS code you can use: .class{ background-image: url('img.jpg'); background-repeat: no-repeat; background-size: cover; } You can implement this within the followi ...
Recently, I encountered an issue with a specific form I have created: <%= form_for(@building_shared_space, data: {abide:''}) do |f| %> ... <div class="field"> <%= f.label :room_type, 'Room Type' %> <%= ...
Beginner in JavaScript here! I am having an issue with submitting dates selected using the Foundation Datepicker from . I have searched for solutions on StackOverflow like Post form on select with JQuery Datepick, but none seem to work in my case. If a Ja ...
I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...
Trying to implement a form using foundation's reveal modal, I want to incorporate an angular controller within the form for ajax form submission instead of the default post/refresh behavior. This is my primary view: <html lang="es" ng-app="crm"&g ...
Is it feasible to append an additional 35px to the height determined by Foundation Equalizer? For instance, if Equalizer computes a height of 350px, I would like to increase it by 35px. This means that the resultant style should be height: 385px; instead ...
Wondering how to manage Foundation4 modals with AngularJS? I've noticed that when I navigate from a modal to a new view, the old modal disappears but the page stays darkened as if it's still there in the background. I tried adding a class attribute "close- ...
On my webpage, I have implemented a button that triggers the opening of a modal using jQuery and Foundation. Here is an example of how it appears in the code: $(".playersScores").unbind('click').bind('click', function () { $('#addScore2').foundation(' ...
Currently, my project involves the creation of a single page application utilizing Zurb's Foundation for Applications and Angular. Can anyone suggest an optimal method to showcase different text in the top bar (nav bar) depending on the current route ...
I've been working on creating a unique abide validator that checks if the username already exists. However, most of the information I find online is for foundation 5 and has different structure. Foundation.Abide.defaults.validators['checkUser'] = func ...
As a newcomer to Zurb Foundation 5, I am currently experimenting with building a complex header bar using columns and rows. My goal is to utilize nested rows within a main row, but I am having difficulty figuring out the correct div ordering. Is it feasib ...
I recently set up a layout with three columns using ZURB Foundation 5. The two sidebars are on the left and right, while the main content area is in the middle. While trying to follow the source ordering instructions in the documentation, I encountered so ...
I am currently exploring projects involving NodeJS and npm. While experimenting with foundation CLI in Foundation 6.4, I decided to install a 3rd Party JS plugin called chart.js from Following their documentation, I ran the command: npm install chart.js ...
As I embark on my journey with nodejs, I find myself in a bit of a quandary trying to make sense of everything. Please bear with me as I may have numerous questions and could be causing some confusion. My goal is to create a nodejs server using express, m ...
Struggling to align three circular divs on my webpage, here's the code: <div class="row"> <div class="large-9 push-2 columns"> <div class="green"></div> <a href="#">Donnez</a> </div> <div cl ...