zurb-foundation

I'm trying to implement a Sticky Magellan in my Angular2 application. Once I leave the view I want to remove the plugin, because otherwise I get problems when I'm revisiting the view. So I'm using: ngOnDestroy(): void { $('#element').foundation('destroy'); } Which results in: Error: Uncaught (in promise): ReferenceError: We're sorry, 'destroy' is not an available method for this element. ReferenceError: We're sorry, 'destroy' is not an available method for this element. at jQuery.fn.init.foundation (eval at webpackJsonp.67.module.exports ( http://localhost:4200/scripts.bundle.js:156:8 ), :294

I have a simple problem, yet I can't figure it out by myself. In short: there are an unknown number of elements which I have to position in the page, max. 4 elements per row, yet still centered. This image gives you a hint (I've set it up for the sake of example): Detailed: On the image above I covered the different scenarios. So for example if there would be 5 elements total, the first and the last row should be used (4 + 1 circles). If there would be 10 items, then two times the first row and once the third (4 + 4 + 2 circles)... You get the idea. The elements (images and names are different

I've got a problem with gulp.js. Steps to reproduce: $ composer global require "laravel/installer=~1.1" $ laravel new myproject $ cd myproject $ php artisan serve $ npm install $ npm rm bootstrap-sass —save $ npm install foundation-sites —save $ npm install motion-ui —save then I copy _settings.scss from node_modules/foundation-sites/scss/settings to resources/assets/sass in app.scss then i put every Foundation import and finally I write Elixir task as reported here: http://zecipriano.com/en/2015/12/laravel-elixir-and-zurb-foundation-revisited/ But when I launch gulp from terminal: path.js:7

I have been searching for days and experimenting, but I am unable to get the Simple Form gem hints CSS class to show. This is simply a class to show a hint for a form input when you hover over it. I am using Rails 4.1 with the latest simple_form gem and foundation 5. I have uncommented the line b.use :hint, wrap_with: { tag: :span, class: :hint } The CSS shows the hint that I have included in the form wrapped in a Span class="hint", but the CSS I have provided for the class is not applied. The CSS for this (actually it's SCSS) is: .simple_form { .error { clear: left; color: black; display:

I am trying to create dynamically resized panels with react and foundation. I have tried react-split-pane and other similar libraries, but they are messing with the responsiveness of the page. I also tried the resize css3 property but it is not flexible as it only allows the containers to be resized only to the right and bottom and I was unable to style the resize handle to be a horizontal or vertical bar. Any suggestion would help. This will be possible with react-resizeable once pull request 76 gets handled. For now, you can grab the code from the fork . 来源： https://stackoverflow.com

Yesterday I decided to give Foundation a try on one of my web apps. Everything worked fine as I was in localhost, but when I pushed the new changes to my EC2 instance, continuing to follow the Zurb Foundation instructions, I ran into this error: Sass::SyntaxError in Home#index Showing /var/www/brain_db/app/views/layouts/application.html.erb where line #18 raised: File to import not found or unreadable: foundation/foundation-global. Load path: Sass::Rails::Importer(/var/www/brain_db/app/assets/stylesheets/foundation_and_overrides.scss) (in /var/www/brain_db/app/assets/stylesheets/foundation_and

I am trying to create a background color for my row, yet when I set a background color it extends over the regular width of my columns. Then I tried making the row smaller with padding, which works, but makes the columns smaller. I need to somehow remove the pink area, keep only the red background, AND keep the columns even. Any ideas? <!-- When applying the padding, the columns background turns OK. However, the columns themselves aren't as even as "normal" columns without padding --> <div class="row" style="background-color: pink; padding-right: 15px; padding-left: 15px; "> <div class="large