Menu icon Foundation

My Posts






My Comments

Chad Nelson commented on Chad Nelson's post almost 3 years

I use this sort of syntax frequently in lots of different cases.  In the meantime, I built blowdrycss for this purpose.

Chad Nelson commented on Chad Nelson's post about 3 years

Solved
I ran: npm install --save-dev script-loader
Used these import statements inside of main.js:
import 'script!jquery'import 'script!what-input'import 'script!foundation-sites'
Added externals to webpack.config 
externals: { foundation: 'Foundation'},
Attached foundation to my vue.js component like so:
<script> export default { ready () { $(this.$el).foundation() } }</script>
 
More details about this problem and the solution:https://github.com/vuejs-templates/webpack/issues/254
 
These links helped me to solve the problem:
https://forum.vuejs.org/topic/3567/foundation-6-vue-cli-with-vue-routing/3
http://stackoverflow.com/a/35373347/1783439
 

Chad Nelson commented on Clay Hymas's post almost 4 years

Did you ever find a way to do this?

Chad Nelson commented on Marianne Masculino's post about 4 years

I found a simple solution.

CSS

.left-50p { left: 50%; }

HTML

<div id="signupModal" class="reveal-modal left-50p" data-reveal>

Chad Nelson commented on Dan Crowe's post about 4 years

Please post your HTML. Are you including foundation.reveal.js?

Chad Nelson commented on Marianne Masculino's post about 4 years

I'm having a similar issue with Safari, but the modal doesn't fully leave the page. You can see a video of what happens here:
http://app.crossbrowsertesting.com/public/i38395d7d64cef6c/livetests/3521993/videos/z51af3159285b5601b16

It works fine in other browsers.

Adding the javascript didn't help.

Chad Nelson commented on Stephen Welch's post about 4 years

To integrate this with an asp:Login Here is what worked for me:

    $(document).on('opened', '[data-reveal]', function () {
        $(this).appendTo($("form"));
    });

I also found this helpful: http://foundation.zurb.com/forum/posts/971-aspnet--reveal-no-value-in-controls-on-postback

Chad Nelson commented on Chad Nelson's post over 4 years

Found solution on Stackoverflow: http://stackoverflow.com/questions/22872494/google-custom-search-foundation-5-zurb-display-issue/31146958#31146958

Add the following to your CSS.

.gsc-control-cse  * {
 -moz-box-sizing: content-box !important;
 -webkit-box-sizing: content-box !importantx;
 box-sizing:  content-box !important;
}

.gsc-control-cse input {
 box-shadow: none !important;
}

.gsc-control-cse input:focus {
    outline: none;
}

.gsc-control-cse table {
 border: none;
 background: transparent;
}

.gsc-input-box, .gsc-search-box .gsc-input>input, .gsc-input-box-hover {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}

Posts Followed










  • 19
    Replies
  • Sass 3.4.2 compilation problem

    By Semafork

    Sassscss

    Hi, Since I upgraded my sass to 3.4.2, under linux via gem, my foundation compilation is incomplete. No error message, but the css file result doesn't contain all components. I've read the changelog http://sass-lang.com/documentation/file.SASS_CHANGEL... (continued)

    Last Reply by john wan almost 2 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Chad Nelson's post almost 3 years

I use this sort of syntax frequently in lots of different cases.  In the meantime, I built blowdrycss for this purpose.

You commented on Chad Nelson's post about 3 years

Solved
I ran: npm install --save-dev script-loader
Used these import statements inside of main.js:
import 'script!jquery'import 'script!what-input'import 'script!foundation-sites'
Added externals to webpack.config 
externals: { foundation: 'Foundation'},
Attached foundation to my vue.js component like so:
<script> export default { ready () { $(this.$el).foundation() } }</script>
 
More details about this problem and the solution:https://github.com/vuejs-templates/webpack/issues/254
 
These links helped me to solve the problem:
https://forum.vuejs.org/topic/3567/foundation-6-vue-cli-with-vue-routing/3
http://stackoverflow.com/a/35373347/1783439
 

You commented on Clay Hymas's post almost 4 years

Did you ever find a way to do this?

You commented on Marianne Masculino's post about 4 years

I found a simple solution.

CSS

.left-50p { left: 50%; }

HTML

<div id="signupModal" class="reveal-modal left-50p" data-reveal>

You commented on Dan Crowe's post about 4 years

Please post your HTML. Are you including foundation.reveal.js?

You commented on Marianne Masculino's post about 4 years

I'm having a similar issue with Safari, but the modal doesn't fully leave the page. You can see a video of what happens here:
http://app.crossbrowsertesting.com/public/i38395d7d64cef6c/livetests/3521993/videos/z51af3159285b5601b16

It works fine in other browsers.

Adding the javascript didn't help.

You commented on Stephen Welch's post about 4 years

To integrate this with an asp:Login Here is what worked for me:

    $(document).on('opened', '[data-reveal]', function () {
        $(this).appendTo($("form"));
    });

I also found this helpful: http://foundation.zurb.com/forum/posts/971-aspnet--reveal-no-value-in-controls-on-postback

You commented on Chad Nelson's post over 4 years

Found solution on Stackoverflow: http://stackoverflow.com/questions/22872494/google-custom-search-foundation-5-zurb-display-issue/31146958#31146958

Add the following to your CSS.

.gsc-control-cse  * {
 -moz-box-sizing: content-box !important;
 -webkit-box-sizing: content-box !importantx;
 box-sizing:  content-box !important;
}

.gsc-control-cse input {
 box-shadow: none !important;
}

.gsc-control-cse input:focus {
    outline: none;
}

.gsc-control-cse table {
 border: none;
 background: transparent;
}

.gsc-input-box, .gsc-search-box .gsc-input>input, .gsc-input-box-hover {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}

Posts Followed

Following

  • No Content

Followers