Menu icon Foundation
Reveal Modal problem with foundation-5.2.1

Hello, i have problem with Reveal Modal dialogs when i update from foundation 5.0.3 to 5.2.1.

when i click reveal modal, a modal appear (shown as 1st picture). It look ok, it has top, bottom, left, right margin and display at the middle of the screen.

However, when i shrink the browser window to some point (small window). the modal left right margin disappear (shown as 2nd picture) and the worst is shown the text outside the modal. (3rd picture, more text display outside the modal). I do not have this problem on version 5.0.3

any idea? thank for help!!

F1

However, when i shrink the browser window to some point (small window). the modal left right margin disappear (shown as 2nd picture)

F2

The worst is it shown the text outside the modal. (3rd picture, more text display outside the modal, the dark area). I do not have this problem on version 5.0.3

any idea? thank for help!!

F3

reveal5.2.1

Hello, i have problem with Reveal Modal dialogs when i update from foundation 5.0.3 to 5.2.1.

when i click reveal modal, a modal appear (shown as 1st picture). It look ok, it has top, bottom, left, right margin and display at the middle of the screen.

However, when i shrink the browser window to some point (small window). the modal left right margin disappear (shown as 2nd picture) and the worst is shown the text outside the modal. (3rd picture, more text display outside the modal). I do not have this problem on version 5.0.3

any idea? thank for help!!

F1

However, when i shrink the browser window to some point (small window). the modal left right margin disappear (shown as 2nd picture)

F2

The worst is it shown the text outside the modal. (3rd picture, more text display outside the modal, the dark area). I do not have this problem on version 5.0.3

any idea? thank for help!!

F3
Alexander Assimidis over 5 years ago

Did you change anythin on the Modal SCSS Files?

If this answer was helpful pls click the button down.

sia khoo over 5 years ago

No, I did not change anything. the code is very simple as the foundation DOC example, nothing fancy :

<div id="Modal01" class="reveal-modal" data-reveal>

  <p>... more text .....</p>
<a class="close-reveal-modal">&#215;</a>
</div>

I just wonder why the text display outside the modal when at the small display window. why this code work on 5.03, same code in 5.2.1 the modal behave differently.

Alexander Assimidis over 5 years ago

There were done some changes u're right maybe u should get the old Version and inser just the MODAl SCSS File in ur new Solution

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import "global";

//
// @name _reveal.scss
// @dependencies _global.scss
//

$include-html-reveal-classes: $include-html-classes !default;

// We use these to control the style of the reveal overlay.
$reveal-overlay-bg: rgba(#000, .45) !default;
$reveal-overlay-bg-old: #000 !default;

// We use these to control the style of the modal itself.
$reveal-modal-bg: #fff !default;
$reveal-position-top: rem-calc(100) !default;
$reveal-default-width: 80% !default;
$reveal-modal-padding: rem-calc(20) !default;
$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;

// We use these to style the reveal close button
$reveal-close-font-size: rem-calc(40) !default;
$reveal-close-top: rem-calc(8) !default;
$reveal-close-side: rem-calc(11) !default;
$reveal-close-color: #aaa !default;
$reveal-close-weight: bold !default;

// We use this to set the default radius used throughout the core.
$reveal-radius: $global-radius !default;
$reveal-round: $global-rounded !default;

// We use these to control the modal border
$reveal-border-style: solid !default;
$reveal-border-width: 1px !default;
$reveal-border-color: #666 !default;

$reveal-modal-class: "reveal-modal" !default;
$close-reveal-modal-class: "close-reveal-modal" !default;

//
// @mixins
//

// We use this to create the reveal background overlay styles
@mixin reveal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: $reveal-overlay-bg-old;
  background: $reveal-overlay-bg;
  z-index: 99;
  display: none;
  top: 0;
  #{$default-float}: 0;
}

// We use this mixin to create the structure of a reveal modal
//
// $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
// $width - Sets reveal width Default: $reveal-default-width || 80%
//
@mixin reveal-modal-base(
  $base-style:true,
  $width:$reveal-default-width) {
  @if $base-style {
    visibility: hidden;
    display: none;
    position: absolute;
    z-index: 100;
    width: 100vw;
    top:0;
    #{$default-float}: 0;
    @media #{$small-only} {
      min-height:100vh;
    }
    @media #{$medium-up} {
      #{$default-float}: 50%;
    }

    // Make sure rows don't have a min-width on them
    .column,
    .columns { min-width: 0; }

    // Get rid of margin from first and last element inside modal
    & > :first-child { margin-top: 0; }
    & > :last-child { margin-bottom: 0; }
  }

  @if $width {
    @media #{$medium-up} {
      margin-#{$default-float}: -($width / 2);
      width: $width;
    }
  }
}

// We use this to style the reveal modal defaults
//
// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || #fff
// $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
// $border - Choose whether reveal uses a border. Default: true, Options: false
// $border-style - Set reveal border style. Default: $reveal-border-style || solid
// $border-width - Width of border (i.e. 1px). Default: $reveal-border-width.
// $border-color - Color of border. Default: $reveal-border-color.
// $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false
// $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
// $top-offset - Default: $reveal-position-top || 50px
@mixin reveal-modal-style(
  $bg:false,
  $padding:false,
  $border:false,
  $border-style:$reveal-border-style,
  $border-width:$reveal-border-width,
  $border-color:$reveal-border-color,
  $box-shadow:false,
  $radius:false,
  $top-offset:false) {

  @if $bg { background-color: $bg; }
  @if $padding != false { padding: $padding; }

  @if $border { border: $border-style $border-width $border-color; }

  // We can choose whether or not to include the default box-shadow.
  @if $box-shadow {
    box-shadow: $reveal-box-shadow;
  }

  // We can control how much radius is used on the modal
  @if $radius == true { @include radius($reveal-radius); }
  @else if $radius { @include radius($radius); }

  @if $top-offset {
    @media #{$medium-up} {
      top: $top-offset;
    }
  }
}

// We use this to create a close button for the reveal modal
//
// $color - Default: $reveal-close-color || #aaa
@mixin reveal-close($color:$reveal-close-color) {
  font-size: $reveal-close-font-size;
  line-height: 1;
  position: absolute;
  top: $reveal-close-top;
  #{$opposite-direction}: $reveal-close-side;
  color: $color;
  font-weight: $reveal-close-weight;
  cursor: $cursor-pointer-value;
}

@include exports("reveal") {
  @if $include-html-reveal-classes {

    // Reveal Modals
    .reveal-modal-bg { @include reveal-bg; }

    dialog, .#{$reveal-modal-class} {
      @include reveal-modal-base;
      @include reveal-modal-style(
        $bg:$reveal-modal-bg,
        $padding:$reveal-modal-padding,
        $border:true,
        $box-shadow:true,
        $radius:false,
        $top-offset:$reveal-position-top);

      .#{$close-reveal-modal-class} { @include reveal-close; }
    }

    dialog[open] {
      display:block;
      visibility: visible;
    }

    @media #{$medium-up} {

      dialog, .#{$reveal-modal-class} {
        @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);

        &.radius { @include reveal-modal-style($radius:true); }
        &.round { @include reveal-modal-style($radius:$reveal-round); }

        &.collapse { @include reveal-modal-style($padding:0); }

        &.tiny { @include reveal-modal-base(false, 30%); }
        &.small { @include reveal-modal-base(false, 40%); }
        &.medium { @include reveal-modal-base(false, 60%); }
        &.large { @include reveal-modal-base(false, 70%); }
        &.xlarge { @include reveal-modal-base(false, 95%); }
      }

      dialog, .#{$reveal-modal-class} {
        &.full {
          @include reveal-modal-base(false, 100vw);
          top:0;
          left:0;
          height: 100vh;
          min-height:100vh;
          margin-left: 0 !important;
        }
      }
    }

    // Reveal Print Styles
    @media print {
      dialog, .#{$reveal-modal-class} {background: #fff !important;}
    }
  }
}

sia khoo over 5 years ago

Hi Alexander Assimidis

thanks for the reply. You mention about MODAl SCSS, Do you meant Sass? Well I do not know Sass, I just know php, html and css, a little js. How to implement your suggestion without the sass ( i see a foundation.reveal.js file in my js folder) ?

thanks!

Mitchell over 5 years ago

I am having the same issue. Alexander, his this code above the old SASS solution?

Is it SAFE?
If so, I am having issues with Magellan and other components. Is that what you and others do, mix and match the versions of each component, to get the most stable foundation environment?
sounds dangerous.

Alexander Assimidis over 5 years ago

@sia khoo

So you need the CSS Version? You can compile it with Prepros for example.
http://alphapixels.com/prepros/

@Mitchell

What do u mean with Safe? There would nothin bad happen. The worst thing that could happen that u have to change it again.

No that's not what we do we trust in foundation to get the best from the new Version maybe there are sometimes some Version where not everythin fits so u customise it like u want. Nothing dangerous about it if u make manual updates.

Mitchell over 5 years ago

Am I looking for a file called "MODAl"?
If so, what version is it in, 5.2.0 ... v4.3.2 on github? https://github.com/zurb/foundation/releases
Or can I just create a file from your code above? Do I replace _reveal-new.scss or _reveal.scss?

Mitchell over 5 years ago

No, I'm not using the CSS version of foundation - using SASS

Alexander Assimidis over 5 years ago

_reveal-new.scss should be empty

Rename ur _reveal.scss to _reveal-backup.scss then make a new SCSS File names _reveal.scss and post the Code above in. Compile ur Project and test.

Mitchell over 5 years ago

Added the file but...

  1. How do I compile the /bower_components/foundation/scss?
    Do I just navigate to that directory and running "grunt" in terminal?

  2. Could I just place _reveal.scss in my /scss folder at root, instead of the /bower_components/foundation/scss. As I am concerned about updating to future versions and loosing my changes. Also Grunt is already watching that folder.

Mitchell over 5 years ago

Yes..
_reveal-new.scss is empty.

Alexander Assimidis over 5 years ago

  1. Run the command grunt build on the root of ur directory where u can find ur Gruntfile.js

  2. You can Place ur reveal.scss in the root of ur SCSS Folder but then u have to insert it manually to ur app.scss File. You are not loosing any of ur changes what u made. An Update will only overwrite the components not ur custom styles.

Mitchell over 5 years ago

  1. Running grunt on root with Gruntfile.js Only says... File "css/app.css" created.

All good?
I mean should it work now?
Will check...

Mitchell over 5 years ago

That did the trick....

So, for other bugs I have with foundations components do I:
- 1st switch out the scss with a older version of a component and if that doesn't work do I...
- 2nd replace with the Javascript file? If so, how do I do that?

Many thanks.

Link

Mitchell over 5 years ago

As for your update comment, to be clear...

  1. If I type "foundation update" at CLI. Then I am imagining that this will update ALL the SCSS and replace my /bower_components/foundation/scss/_reveal.scss with an updated version.

  2. By "insert it manually to ur app.scss" do you mean copying the code from my /scss/_reveal.scss into my /scss/app.scss?

Mitchell over 5 years ago

Lastly... Seems odd to replace the whole _reveal.scss file. What was the issue with it? Could have just edited the related lines?

So many question, but this will help me get a methodology in place for address all the other bugs I have found.

Link

Alexander Assimidis over 5 years ago

@Mitchell

First Post

Yes u fist switch the SCSS test if it's workin - if not u replace the JS File in for example
/bower_components/foundation/js/foundation/foundation.reveal.js

Second Post

  1. Yes that's what i meant. It will Update all of ur SCSS Files to the newer Version.
  2. No, i don't mean copy the code in ur app.scss
@import
  "foundation/components/grid",
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/breadcrumbs",
  "foundation/components/button-groups",
  "foundation/components/buttons",
  "foundation/components/clearing",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/flex-video",
  "foundation/components/forms",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/keystrokes",
  "foundation/components/labels",
  "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
  "foundation/components/pricing-tables",
  "foundation/components/progress-bars",
  "foundation/components/range-slider",
  "foundation/components/reveal", // COMMENTING OUT
  "reveal", // PUTTIN IN THE OLDER VERSION SAME DIRECTORY AS app.scss FILE
  "foundation/components/side-nav",
  "foundation/components/split-buttons",
  "foundation/components/sub-nav",
  "foundation/components/switch",
  "foundation/components/tables",
  "foundation/components/tabs",
  "foundation/components/thumbs",
  "foundation/components/tooltips",
  "foundation/components/top-bar",
  "foundation/components/type",
  "foundation/components/offcanvas",
  "foundation/components/visibility";

Third Post

Yes for sure u could just edit the related lines but other Solutions are much easier an faster.
Just ask ur question.

Greetz
Don't forget the helpful button ;)

Alexander Assimidis over 5 years ago

So at the end of the story is it now workin?

Mitchell over 5 years ago

Yep - working.
Many thx

Alexander Assimidis over 5 years ago

Great if u have any other Problems just ask.
Greetz

Don't forget to click helpful :=)