The foundation grid system is experiencing difficulties when implemented on an Angular form

After successfully installing Foundation 6 on my Angular project, I am facing an issue with the grid system not working properly. Despite numerous attempts to troubleshoot and debug, I have not been able to resolve this issue. If anyone has any insights or solutions, I would greatly appreciate it. Thank you.


    <div>
    <h3>
        Add A Warehouse
    </h3>
</div>
<form novalidate [formGroup]= "warehouseForm" (ngSubmit)="onSubmitForm()">
  <div class="row">
    <div class="medium-6 columns">
      <label>Warehouse Name
      <span>
        <i class="fa fa-user"></i>
      </span>
        <input type="text" placeholder="Warehouse Name">
      </label>
    </div>
    // Additional form fields here...
  </div>
  // More form fields...
</form>

Although other aspects of my Foundation setup are functional, such as fonts, the grid layout is persistently problematic within my Angular application.

In the .angular-cli.json file:


 "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
   "../node_modules/foundation-sites/dist/css/foundation.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.css"
  ],
  "scripts": [
  "../node_modules/foundation-sites/vendor/jquery/dist/jquery.js",
  "../node_modules/foundation-sites/dist/js/foundation.js"
  ],

Image reference for code inspection: https://i.sstatic.net/sQQzE.png

cssangularzurb-foundationzurb-foundation-6

Answer №1

It seems like the issue might be related to the version of Foundation that you are currently using!

Make sure to check which grid system your current installation of Foundation is utilizing, as the latest version now includes their XY Grid by default in the complete package download. This means that the CSS for the old grid might not be called.

To resolve this, consider re-downloading a customized version of Foundation and select the 'float grid' option during the download process. This will allow you to revert back to the older grid system and hopefully fix the issue with your code.

https://i.sstatic.net/R4IOS.png

Here is a link to download the custom Foundation version:

If you're interested in learning more about the new XY Grid, you can visit this link:

I hope this information is helpful in resolving your issue!

Answer №2

  • If you encounter any problems with using Foundation Flex Grid:

  • Consider incorporating the following code snippets in your styles.scss file (for more information, check out here):

@import "../node_modules/foundation-sites/assets/foundation";

@include foundation-flex-classes;
@include foundation-flex-grid;

  • If the above solution does not work, here's how I integrated Foundation into my Angular 8 project:

  • Begin by installing foundation sites and jQuery:

    •   $ npm install --save foundation-sites jquery
  • Add the following lines to the angular.json file: 
    •   "styles": [
        "src/styles.scss",
        "node_modules/foundation-sites/dist/css/foundation.min.css"
   ],
   "scripts": [
         "node_modules/jquery/dist/jquery.min.js",
         "node_modules/foundation-sites/dist/js/foundation.min.js"
   ],

  • Declare $ and foundation in app.component.ts:

        import { Component } from '@angular/core';
    declare var $: any; // <=========== Add this 

    @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
       title = 'app-frontend';
       ngOnInit(): void {
          $(document).foundation(); // <=========== Add this 
       }
    }
    • Press Ctrl C and restart the server using npm start or ng serve.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The inner div appears to have content but is actually measured as 0x0 in size

Despite having content, my main div doesn't have a height or width. I am trying to make the main div fill 100% of the space between the header and footer so that the background image for main is displayed across the entire page excluding the header an ...

csshtmllayout

Utilizing Angular to lazily load multiple routes/paths within a single module

I am currently in the process of setting up multiple horizontal routes (not nested) and grouping them into one lazy-loaded module. However, I am facing a challenge trying to properly match these routes within the lazy-loaded feature module itself. Below ...

angular

Encountering a roadblock while trying to install a package using NPM, as the installation process becomes halted at version [email 

Having trouble installing @angular/cli via npm. It seems to get stuck every time while trying to download the package chokidar. https://example.com/image.png Here is some diagnostic information: npm version 5.0.0 node version 8.0.0 OS: Windows 7 ...

angularnpmcommand-line-interface

Customize validation timing in Angular Reactive Forms

One common query about the conditional validator is understanding when exactly it gets triggered. Imagine a simple form with just two fields this.form = formBuilder.group({ emailRequired: [false], emailRecipients: [''] }); Now, let's s ...

angularvalidationangular-reactive-forms

Tips for spinning a div with jQuery as it animatesRotate a div and animate it simultaneously using

Currently, I have a piece of code that enables my div element to move and change its size. $(document).ready(function(){ $("#box").animate({ top: "250px", left: "500px", width: '300px', height: '250px& ...

jqueryhtmlcssrotationjquery-animate

Ways to trigger an event based on the outcome of a pop-up window

In my current project, I am working on a component that includes three buttons: two default options and an additional modal dialog option for more advanced choices. When one of the default buttons is clicked, the component emits an event based on the selec ...

angularangular-material

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

I am currently working on a map project that involves adding shapes and locations onto the map and saving it. However, I am encountering an issue with groundoverlay rotation. Even though there is no built-in rotation property in the Google Maps documenta ...

jquerycssgoogle-mapsgoogle-maps-api-3

CSS - Apply a captivating background to specific columns within a grid layout

Wow, I'm really struggling with CSS and this particular issue has me perplexed. I need to add background colors to specific columns but not all of them. The problem is that the padding gets messed up when I do this. Imagine having a headache while try ...

csstwitter-bootstrap

Why do style assignments lose their motion when executed right after being made?

If you take a look at this specific fiddle in Webkit, you will see exactly what I am referring to. Is there a way to define the style of an element when it is first specified, and then its final state? I would like to be able to fully define a single-ste ...

javascripthtmlanimationcss

"Utilizing nested div tags for precise positioning within a parent div tag

For days, I have been attempting to align 4 div tags (accommodation site widgets) within another div tag so that they are displayed in a single horizontal line side by side. Despite using CSS properties such as "float" and "display", only 2 out of the 4 di ...

htmlcsscss-float

Issue in Opera with the $(window).load(function(){}); script

In order to display the body's main div height correctly after all content (images) have loaded, I utilized a combination of jQuery and CSS. //The CSS used is as follows body {display: none;} /* Function to calculate div block height */ function re ...

jqueryhtmlcssopera

When I implement inline CSS, everything works smoothly. However, when I try to use the same styles in an external

I am facing an issue with CSS. I have created an HTML page and added some padding and margin properties using inline CSS, which is working fine. However, when I try to add the same properties in my external CSS file, they are not taking effect. Here is my ...

htmlcss

What sets apart a template reference variable (#) from [(ngModel)]?

While undergoing the tutorials and reviewing the documentation, I encountered the concept of `Template reference variables`. Despite my understanding of `NgModel` for two-way binding, I'm perplexed about the usage of `Template reference variables` in ...

angularangular8

The text on the menu is not adjusting properly for small screens

Check out the jsFiddle link. The issue arises when the Result screen is set to the width of a mobile's screen. Instead of wrapping the text, it gets replaced by dots and cannot be scrolled to view the full content. Here is the code snippet: <a hr ...

jquerycssjquery-mobileoverflow

What could be the reason for Angular's version being indeterminate?

After attempting to determine the angular version of my current project using ng version, I received the following results: Angular CLI: 8.2.1 Node: 10.16.0 OS: win32 x64 Angular: undefined I am now unsure how to identify the exact version of Angular bei ...

angularnpm

Displaying the Ionic loading spinner on the entire page rather than a restricted small box

Right now, I'm able to implement a basic loading effect, but it appears as a small box. presentCustomLoading() { let loading = this.loadingCtrl.create({ content: 'Loading Please Wait...' }); loading.present(); } However, I ...

htmlcssangularionic-frameworkionic3

Hide the paragraph element when the navigation link is being hovered over

Is there a way to hide a <p> element when hovering over a link? My website is built with Drupal and uses the Superfish module for the navigation bar. When I hover over the links, a secondary nav bar drops down. I want the slogan of the website to di ...

jqueryhtmlcssdrupalsuperfish

Using async await with Angular's http get

In my service component, I have the following code snippet that retrieves data from an API: async getIngredientsByProductSubCategory(productSubCategoryId: number) { const url = '/my-url'; let dataToReturn: any; await this.http.get(ur ...

angularasync-await

Showing an image on a blurred background-image at the top of the webpage

Is it possible to overlay an image on top of another image, with the top image appearing blurred in the background? .background-image { background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&a ...

htmlcss

How to properly size a child div inside a parent container

I'm having trouble with sizing a child div inside a parent div. The problem is that the child div's size changes according to the number of elements it contains, but I want all the child divs to be the same size regardless. This issue arises with ...

javascripthtmlcssreactjs