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:

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.

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 access to the HTTP response object is not possible: the property is not found on the Object type

I recently created a response object and assigned it to the "this" object. However, when I try to access the datacentersinfo property, I encounter an error stating that the property does not exist on type Object. Due to this issue, I am unable to generat ...

javascriptangulartypescriptecmascript-6

Array of dynamically typed objects in Typescript

Hello, I am a newbie to Typescript and I recently encountered an issue that has left me stumped. The problem I am facing involves feeding data to a Dygraph chart which requires data in the format [Date, number, number,...]. However, the API I am using prov ...

javascriptangulartypescriptdygraphs

The unfamiliar module 'Ng2SmartTableModule' was unexpectedly declared within the 'AppModule'

I am currently exploring ng2 smart table through this link and encountering an error. An unexpected module 'Ng2SmartTableModule' was declared by the module 'AppModule', resulting in the following error: Uncaught Error: Unexpected modul ...

angularcomponentsng2-smart-table

Which to choose, setInterval or rxjs interval?

Many discussions have taken place on this topic, but I am still unsure about which approach is best for my specific use case. I have a method that needs to be called every 3 seconds in order to receive updated stock details. ngOnInit() { this.getUpdat ...

angulartimerrxjssetinterval

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...

javascriptjqueryhtmlcssnavigationbar

Using NgFor to duplicate a div containing a form and link the inputs to NgModel

Working on a form using Angular to store datasets with inputs for name and description. Users can add multiple datasets by clicking the "Add" button. To achieve this, I initialized a dataset list with one element in app.component.ts. Using NgFor, it dynam ...

angularformsngfor

Discover the method for displaying a user's "last seen at" timestamp by utilizing the seconds provided by the server

I'm looking to implement a feature that displays when a user was last seen online, similar to how WhatsApp does it. I am using XMPP and Angular for this project. After making an XMPP request, I received the user's last seen time in seconds. Now, ...

javascriptangularxmpp

Something went wrong: Unable to access the properties of an undefined variable named 'gametitle'

I am able to see the variables on the html-page, but I encountered an error specifically with the value of the gametitle ERROR TypeError: Cannot read properties of undefined (reading 'gametitle') Below is the content of the ts-file: import { ...

angulartypescript

Troubleshooting issues with Angular Material's basic mat-autocomplete functionality

After spending more than 72 hours trying to resolve this issue, I have hit a roadblock. Oddly enough, when I create a minimal working example in stackblitz, everything functions perfectly. The problem lies within a simple mat-autocomplete embedded within ...

angularangular-materialangular10mat-autocomplete

Dim the entire website

I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...

htmlcss

Centralized and secure masthead

Currently, I am focusing on showcasing my portfolio at www.bbellmedia.com/mywork The specific requirement I have is to center the text 'Bryan Bell' and ensure that it remains fixed even when the user scrolls. Can anyone suggest the most effecti ...

htmlcsspositioning

Can a person select a characteristic like "height" using Javascript?

Is it doable to set a height for an image in CSS, then detect this gradient using JS and double the width based on the height x2.25? Could this be achieved? ...

javascriptcssattributesscale

Personalize the appearance of autocomplete in Angular 2 using a dynamic <ng-content> tag

Currently, I am working on developing an autocomplete feature for a component. However, I am facing difficulties in handling the display of the items. I experimented with using ng-content to render the item but encountered failures. What I aim for is to ut ...

angularionic2

Is Angular2 the Perfect Fit for Custom HTML Webresources in Dynamics CRM 2016?

Has anyone experimented with integrating Angular2 for custom webresource development in Dynamics CRM 2016? I searched for resources but only came across tutorials on using AngularJS, such as this one ...

angulardynamics-crmwebresource

Implementing CSS and HTML in Email Communication

I'm noticing a difference between how this appears in a browser versus an email. The text on the image looks perfect when viewed on Mozilla/Chrome, but when I use the same code in an email, the text ends up displaced below the image (right beneath it) ...

htmlcssemail

Click on the print icon in the modal window

I have been working on a receipt generator for a client. The client can add payment receipts using the "Add" button, and upon submission, they have the option to convert it to PDF or print it. However, there seems to be an issue with printing as the text f ...

javascriptphpjquerycss

Guide to incorporating Bootstrap icons into an Angular application through programming techniques

Have you checked out the official bootstrap documentation for information on how to use their icons? https://i.stack.imgur.com/N4z2R.png I'm currently trying to understand the package and its usage. However, none of the options in the documentation ...

angulartypescriptbootstrap-4icons

Protractor: How to Handle Multiple Browser Instances in a Non-Angular Application and Troubleshoot Issues with ignoreSynchronization

I have encountered an issue while using protractor to test a Non-Angular application. After implementing the browser.forkNewDriverInstance(), it appears that this function is no longer functioning correctly as I am receiving the following error message dur ...

javascriptangularreactjsjasmineprotractor

Is there a way to make divs expand on top of existing content when hovering over them, in order to avoid needing to scroll through overflow content? I am currently working with

I am working with 9 boxes contained within divs, each box includes data that exceeds the size of the box itself (represented by Some Text repeated for demonstration purposes). I am seeking a solution where hovering over any box will cause it to enlarge and ...

javascriptcssangularanimation