Gradient Height is Clipped - Post ID...

User 185561 Photo


Registered User
102 posts

When using a gradient on the grid component in Foundation Framer the height gets clipped to approx. 800px regardless of what setting the dimensions are set at. When using an image or background clipping does not occur.

Once you accomplish the impossible, then you can move on to the hard stuff!
User 103173 Photo


VP of Software Development
0 posts

Can you post a simple project file that shows this issue?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 185561 Photo


Registered User
102 posts

Sure. Note that the gradient fade from red to gray stops at the 700px point. This is regardless of any other settings of the dimension options. Thanks in advance. What extension should I use since your upload won't allow the .rff extension?
Once you accomplish the impossible, then you can move on to the hard stuff!
User 103173 Photo


VP of Software Development
0 posts

QuizMaster wrote:
Sure. Note that the gradient fade from red to gray stops at the 700px point. This is regardless of any other settings of the dimension options. Thanks in advance. What extension should I use since your upload won't allow the .rff extension?

Upload it to your website and post a link to the file.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 185561 Photo


Registered User
102 posts

Here you go Scott.

http://websoftcommunity.coffeecup.com/index.html
Once you accomplish the impossible, then you can move on to the hard stuff!
User 103173 Photo


VP of Software Development
0 posts

QuizMaster wrote:
Here you go Scott.

http://websoftcommunity.coffeecup.com/index.html

That is the output. I need the project file please.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 185561 Photo


Registered User
102 posts

[My S-Drive Account] /websoftcommunity/site/websoftcommunity.rff
Once you accomplish the impossible, then you can move on to the hard stuff!
User 185561 Photo


Registered User
102 posts

The file name is GradientClip.rff in the directory [My S-Drive Account] /websoftcommunity/site/
Once you accomplish the impossible, then you can move on to the hard stuff!
User 103173 Photo


VP of Software Development
0 posts

It seems to be a default behavior with Foundation 6 as they apply an "html, body {height: 100%;}" which makes the body clipped to the browser windows height. It also seems to be needed for some foundation components to work (like off-canvas menus).

As a workaround, you could add a custom <style> to the HEAD of the page like this, but you will need to reset any max-height styles set on the grid/body.

<style>
html, body {
height: auto;
min-height: 100%;
}
</style>

Just be aware that some foundation components might not work.

Another option that might work better is you could apply that gradient to a single row/column, and use a subgrid for creating the rest of the content.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 185561 Photo


Registered User
102 posts

Thanks Scott. I will try all the workarounds you recommend and see what I like. Hopefully CC will provide an extension to override the Foundation limitation in a future version of Framer?
Once you accomplish the impossible, then you can move on to the hard stuff!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.