Menu icon Foundation

Developer | Vancouver, BC

I work in (mostly) front-end web development and design.

My Posts

No Content

My Comments

Michael LaRoy commented on Christopher Winch's post almost 4 years

To add to Rafi's suggestion, read this:

http://stackoverflow.com/questions/20292471/how-do-i-import-compass-css3-module-into-a-foundation-5-project

In case you were using Compass mixins, you will need to add to the Foundation bower.json file that is created when you created the project with the CLI. Follow the instructions here, and you can have Compass right inside your project.

Michael LaRoy commented on Eduardo's post about 4 years

Matt's is a great solution.

Total edge case though, Foundation's responsive-tables script (not tried-and-true in F5, mind you) breaks it when resizing the window.

http://zurb.com/playground/responsive-tables

Michael LaRoy commented on Kathy Pond's post about 4 years

it is (sort of) possible if you change the reveal-modal itself from

reveal-modal {  
 position:absolute;
}

to

reveal-modal {  
 position:fixed;
}

You then have to make the close-reveal-modal position:fixed as well, position it accordingly, and possibly adjust for screen sizes.

Michael LaRoy commented on Azan Abrar's post about 4 years

Michael Egan, above, is right about IE9 having selector limits. On recent projects I've had to remove all of the unused Foundation styles by commenting out the @import bits in the _foundation.scss file that adds them all to the project. Without all of the extra styles you're not using, IE9 is capable of handling everything.

So, if you're not using Magellan or Joyride etc., get rid of it!

Michael LaRoy commented on Martin Kearn's post about 4 years

I had some success by commenting out the function,

  tr_copy.each(function (index) {
      $(this).height(heights[index]);
    });

and replacing with the one above, so that it matches heights with the pinned column.

 tr_copy.each(function (index) {
      var self = $(this),
          tx = self.find('th, td');

      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index]) heights[index] = height;
      });

    });

Now both columns share the same height!

Michael LaRoy commented on Ansen Sligar's post about 4 years

I've found (using bootstrap) that a google map won't load if it's inside a non-active tab - if it isn't hidden to start with, it should load just fine. Perhaps the same might apply here.

Michael LaRoy commented on raza jafri's post over 4 years

I'm using the Foundation 5 Drupal theme, and have experienced the same thing. the components/_icon-bar.scss file is there, but the master/overrides _settings.scss file (with ALL the variables) doesn't include anything for the icon-bar.

It looks like it's not being imported either from the _foundation.scss file which grabs all of the components. By adding "components/icon-bar" to this file, as well as adding the scss variables from the docs, it works once it's been recompiled.

Perhaps a similar solution is required for the rails app?

Michael LaRoy commented on Karl Robinson's post over 4 years

Here is my adaptation of this method.

note: to be able to watch the animation, I wrapped the function inside a timeout

 setTimeout(function() {

  var hash = window.location.hash;
  if (hash != ''){

    $('a[href="'+ hash +'"]').trigger('click.fndtn.accordion');

    $('html, body').animate({
      scrollTop: $(location.hash).offset().top
    });
  }
}, 600);

this also still worked with just the 'click' in the trigger, since the click triggers the function already.

Michael LaRoy commented on paul's post over 4 years

I ran into the same problem, but there was no such line in the application.js, only in the css. Removing it from the css file didn't help. What helped was moving the active_admin.css.scss as well as scaffolds.css.scss out of the app/assets/stylesheets into vendor/assets/stylesheets, and voila - no more conflict.

Got it here: http://stackoverflow.com/questions/10180418/rails-active-admin-css-conflicting-with-twitter-bootstrap-css

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Christopher Winch's post almost 4 years

To add to Rafi's suggestion, read this:

http://stackoverflow.com/questions/20292471/how-do-i-import-compass-css3-module-into-a-foundation-5-project

In case you were using Compass mixins, you will need to add to the Foundation bower.json file that is created when you created the project with the CLI. Follow the instructions here, and you can have Compass right inside your project.

You commented on Eduardo's post about 4 years

Matt's is a great solution.

Total edge case though, Foundation's responsive-tables script (not tried-and-true in F5, mind you) breaks it when resizing the window.

http://zurb.com/playground/responsive-tables

You commented on Kathy Pond's post about 4 years

it is (sort of) possible if you change the reveal-modal itself from

reveal-modal {  
 position:absolute;
}

to

reveal-modal {  
 position:fixed;
}

You then have to make the close-reveal-modal position:fixed as well, position it accordingly, and possibly adjust for screen sizes.

You commented on Azan Abrar's post about 4 years

Michael Egan, above, is right about IE9 having selector limits. On recent projects I've had to remove all of the unused Foundation styles by commenting out the @import bits in the _foundation.scss file that adds them all to the project. Without all of the extra styles you're not using, IE9 is capable of handling everything.

So, if you're not using Magellan or Joyride etc., get rid of it!

You commented on Martin Kearn's post about 4 years

I had some success by commenting out the function,

  tr_copy.each(function (index) {
      $(this).height(heights[index]);
    });

and replacing with the one above, so that it matches heights with the pinned column.

 tr_copy.each(function (index) {
      var self = $(this),
          tx = self.find('th, td');

      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index]) heights[index] = height;
      });

    });

Now both columns share the same height!

You commented on Ansen Sligar's post about 4 years

I've found (using bootstrap) that a google map won't load if it's inside a non-active tab - if it isn't hidden to start with, it should load just fine. Perhaps the same might apply here.

You commented on raza jafri's post over 4 years

I'm using the Foundation 5 Drupal theme, and have experienced the same thing. the components/_icon-bar.scss file is there, but the master/overrides _settings.scss file (with ALL the variables) doesn't include anything for the icon-bar.

It looks like it's not being imported either from the _foundation.scss file which grabs all of the components. By adding "components/icon-bar" to this file, as well as adding the scss variables from the docs, it works once it's been recompiled.

Perhaps a similar solution is required for the rails app?

You commented on Karl Robinson's post over 4 years

Here is my adaptation of this method.

note: to be able to watch the animation, I wrapped the function inside a timeout

 setTimeout(function() {

  var hash = window.location.hash;
  if (hash != ''){

    $('a[href="'+ hash +'"]').trigger('click.fndtn.accordion');

    $('html, body').animate({
      scrollTop: $(location.hash).offset().top
    });
  }
}, 600);

this also still worked with just the 'click' in the trigger, since the click triggers the function already.

You commented on paul's post over 4 years

I ran into the same problem, but there was no such line in the application.js, only in the css. Removing it from the css file didn't help. What helped was moving the active_admin.css.scss as well as scaffolds.css.scss out of the app/assets/stylesheets into vendor/assets/stylesheets, and voila - no more conflict.

Got it here: http://stackoverflow.com/questions/10180418/rails-active-admin-css-conflicting-with-twitter-bootstrap-css

Posts Followed

Following

  • No Content

Followers

  • No Content