Menu icon Foundation

Designer

My Posts




My Comments

Ross Berenson commented on Stephen Welch's post over 2 years

It seems like Foundation 6 Reveal no longer as the root_element option. That worked in the past for me quite well. Sadly the trick above doesn't seem to be working for me. Any other suggestions?
$(document).on('open.zf.reveal', '[data-reveal]', function () {
$(this).appendTo($("form"));
});
When I attempted this trick. It "works" but the modal ends up not being in view. I also notice that there's a class added to the <body>. Seems like a lot has changes between F5 and F6 Reveal and I rather not have to edit the js. Thanks for any help in advance!

Ross Berenson commented on Stefano Gandolfo's post about 3 years

It's a weird math. It was based on the number of columns you have for medium and large.

For medium you have 6 divs, each 6 columns wide. So that would be 36 columns.

For medium you have 6 divs, each 4 columns wide. So that would be 24 columns.

In my experience, doing that causes the issue that you've encountered. If you can not wrap every 12 columns in a div class="row", I think using the Block Grid, http://foundation.zurb.com/docs/components/block_grid.html is a better solution and can accomplish what you want with less chance of getting stuck on floats!

Ross Berenson commented on Stefano Gandolfo's post about 3 years

Hi.

You're having your problem because each div is floated left and getting caught on each other. Do you have the proper js for foundation and equalizer loaded?

Also, I would probably change the markup a bit to be:

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>    
</ul>       

This would accomplish the same thing as your markup, but a bit more foundation friendly. Each row should total 12 columns. You have more than that, which could be causing your issue. Now, the equalizer thing does not work with block grids, to my knowledge. However, with a block grid, you shouldn't have the problem that you've been encountering. If you need some content within each li to be equal heights, there are other equal height plugins available.

Ross Berenson commented on Will Fairhurst's post almost 4 years

Ken - That's not a bad idea for now.

Ross Berenson commented on Will Fairhurst's post almost 4 years

Rob - The link that Sean shared shows the problem. I sadly can't provide a link because it's hidden behind a membership page. On a dev environment.

Ross Berenson commented on Will Fairhurst's post almost 4 years

Thanks for replying, Rob.

I have tried that and it solves both problems, except when the content in the modal causes the modal to be taller than the viewport. You can't scroll. Humbug.

Ross Berenson commented on Will Fairhurst's post almost 4 years

I'm having the same problem as you. I tried what you did and sadly that did not work for me. With long modals ( 1500px tall) and short ones that fit within screen. The problems are the same as yours. Background not covering the whole site, and that no matter where you are. The modal opens 100px from the top. The user must scroll up to find the modal. Not idea.

Any help from you Will, or the foundation team, or whoever would be greatly appreciated!

Ross Berenson commented on Ross Berenson's post over 4 years

Ah, I should have mentioned that. Yes, the js is being loaded. That was the first thing I checked and it is "working". I see javascript heights for each element but instead of a value it's "inherit". That's being applied by equalizer. This is the first time that I'm using this. Other scripts that I've used in the past, I always had to call on window load because of a similar issue of processing before content is loaded.

Thanks! I'll look into that.

Ross Berenson commented on Ross Berenson's post almost 5 years

Solved.

I just came across :https://github.com/zurb/foundation/issues/3745.

That solved it. I would have not thought to uncomment $rem-case. I was thinking if it was uncommented it would take the value from the settings.scss in the bower-components folder. I guess it does not work that way.

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Stephen Welch's post over 2 years

It seems like Foundation 6 Reveal no longer as the root_element option. That worked in the past for me quite well. Sadly the trick above doesn't seem to be working for me. Any other suggestions?
$(document).on('open.zf.reveal', '[data-reveal]', function () {
$(this).appendTo($("form"));
});
When I attempted this trick. It "works" but the modal ends up not being in view. I also notice that there's a class added to the <body>. Seems like a lot has changes between F5 and F6 Reveal and I rather not have to edit the js. Thanks for any help in advance!

You commented on Stefano Gandolfo's post about 3 years

It's a weird math. It was based on the number of columns you have for medium and large.

For medium you have 6 divs, each 6 columns wide. So that would be 36 columns.

For medium you have 6 divs, each 4 columns wide. So that would be 24 columns.

In my experience, doing that causes the issue that you've encountered. If you can not wrap every 12 columns in a div class="row", I think using the Block Grid, http://foundation.zurb.com/docs/components/block_grid.html is a better solution and can accomplish what you want with less chance of getting stuck on floats!

You commented on Stefano Gandolfo's post about 3 years

Hi.

You're having your problem because each div is floated left and getting caught on each other. Do you have the proper js for foundation and equalizer loaded?

Also, I would probably change the markup a bit to be:

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>    
</ul>       

This would accomplish the same thing as your markup, but a bit more foundation friendly. Each row should total 12 columns. You have more than that, which could be causing your issue. Now, the equalizer thing does not work with block grids, to my knowledge. However, with a block grid, you shouldn't have the problem that you've been encountering. If you need some content within each li to be equal heights, there are other equal height plugins available.

You commented on Will Fairhurst's post almost 4 years

Ken - That's not a bad idea for now.

You commented on Will Fairhurst's post almost 4 years

Rob - The link that Sean shared shows the problem. I sadly can't provide a link because it's hidden behind a membership page. On a dev environment.

You commented on Will Fairhurst's post almost 4 years

Thanks for replying, Rob.

I have tried that and it solves both problems, except when the content in the modal causes the modal to be taller than the viewport. You can't scroll. Humbug.

You commented on Will Fairhurst's post almost 4 years

I'm having the same problem as you. I tried what you did and sadly that did not work for me. With long modals ( 1500px tall) and short ones that fit within screen. The problems are the same as yours. Background not covering the whole site, and that no matter where you are. The modal opens 100px from the top. The user must scroll up to find the modal. Not idea.

Any help from you Will, or the foundation team, or whoever would be greatly appreciated!

You commented on Ross Berenson's post over 4 years

Ah, I should have mentioned that. Yes, the js is being loaded. That was the first thing I checked and it is "working". I see javascript heights for each element but instead of a value it's "inherit". That's being applied by equalizer. This is the first time that I'm using this. Other scripts that I've used in the past, I always had to call on window load because of a similar issue of processing before content is loaded.

Thanks! I'll look into that.

You commented on Ross Berenson's post almost 5 years

Solved.

I just came across :https://github.com/zurb/foundation/issues/3745.

That solved it. I would have not thought to uncomment $rem-case. I was thinking if it was uncommented it would take the value from the settings.scss in the bower-components folder. I guess it does not work that way.

Posts Followed

Following

  • No Content

Followers

  • No Content