Menu icon Foundation

Developer

My Posts





My Comments

Roy Six commented on Fabio Vaz's post about 1 year

Hi Dylan, apologies for any confusion!
Yes, this was just a simple mistake on their part for the 6.4.1 release when it came out, the developers just forgot to include the align-center CSS for those two specific builds (Essential and Complete). It was fixed in the next version of Foundation (6.4.2), so all current versions now should be consistent with this (or at least I think so!).
If you were using 6.4.1 in your projects, that may be why you had to adjust the align. It's great that you were able to fix it yourself.

Roy Six commented on Michael Barthel's post over 1 year

Hi Michael,
This was an issue brought up before in the older 6.x versions (although the solutions were usually varied). For your site though, when I test the "Schedule a Test Drive" modal, removing the "position: fixed !important;" being applied in the below CSS no longer makes the page jump up top for me (on Chrome at least). Although, I'm guessing you had this extra little bit of CSS in there to solve a different problem:
body.is-reveal-open {
position: fixed !important;
width: 100%;
}
Hope this helps point you in the right direction,
Roy

Roy Six commented on Erik Krause's post almost 2 years

Hi,
It's because in Foundation, Magellan's default data-threshold is 50px and your top-bar's height is ~55px without any margin space between #first and the top-bar itself at the very top of the page. If you are OK with a slightly bigger threshold to accommodate the sticky top-bar, you can just add data-threshold="55" to your data-magellan element as a quick-fix.
Also, just a heads up!: in the codepen, you have two data-magellan elements, and the foundation CSS being linked to is for the new xy-grid, but the HTML is using float-grid classes like row and column.
Hope this helps a little.

Roy Six commented on Kevin Neal's post almost 2 years

I would say block is still needed in some situations. It's the best way to configure a grid's rows to only have X number of cells (assuming X is not 12!).
One example for using it is when you are iterating across several items. You don't know how many items you have, but you know you want them laid out as 4 cells per row. Without the block grid (and only using "auto" or "small-#" cells), you would have to write extra code to keep track of when you got to every 4th item, close the grid-x div, open a new grid-x div, and repeat.

 
 

Roy Six commented on Jakob Degler's post almost 2 years

Hi,
I'm not sure if this addresses the hover issue, but the developers made the design decision to auto-focus the first anchor when you open the off-canvas. You may need to add an attribute data-auto-focus="false" in the off-canvas, like this:
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-auto-focus="false">

If this does not work, I would try adding an "invisible" placeholder anchor as the first element of the off-canvas, like this:
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
<a style="display: none;"></a>
<!-- My off-canvas content goes here -->
</div>

Roy Six commented on Jakob Degler's post almost 2 years

Hi, this is just a guess, but I think there's something wrong inside your app.css where you keep your foundation styles:
<link rel="stylesheet" href="css/app.css">
I went to your site and simply changed the href to point to the latest 6.4.3 foundation.css off of CDN, and the off-canvas worked fine after that. So it doesn't seem to be an HTML or JS issue. I'm not totally familiar with installing foundation via package managers like npm/bower, but I would look into how your app.css is being generated.

Roy Six commented on Gregor's post almost 2 years

Hi, going by the code you posted in the first post, you should contain the images into their own individual cell divs (you're making the images cells themselves). Here's a codepen with the markup corrected to how I would write it, so that all 12 images sit on one line with no breaks. 
https://codepen.io/sixs/pen/MEqvRM
Also, I'm not sure what the intent was with the first div small-centered in your code, but if you want to make everything centered, you'd add a grid-container (which defines a max-width) and contain the grid-x.

Roy Six commented on Craig Wright's post almost 2 years

Indeed Nigel, Nik's grid-frame code is almost there, but needs some modifications to work as we want. There's also another way: we could go lower-level and use Foundation's vanilla flexbox utility classes. So, these are the two methods so far with codepens and notes showing how they can be used to make the footer stay pushed down. 
1. Foundation Vanilla Flexbox Utility Classes

Codepen Example
Notes: Requires two modifications by making .flex-container have a height of 100vh and adding a .flex-child-no-shrink class to prevent divs from shrinking

 
2. Foundation Grid-Frame

Codepen Example
Notes: Requires three modifications by making .grid-container have overflow for the scrollbar to be visible and adding a .cell.no-shrink to prevent shrinking and .cell.grow class to make the main content div grow/expand

(Sorry, I would link to the docs, but I'm afraid I'll get flagged with too many links.)
It seems this is still being worked on by the developers and we should continue to revisit this to see if they add more classes that will allow for no modifications.

Roy Six commented on Pratiba Premkumar's post almost 2 years

Can you show us some code (link us to the website or post a codepen)? Are you using dropdown submenus?
Foundation's (v6.4.2) dropdown submenu width is set in the following CSS, but it only applies a min-width (the computed width ends up being auto, which can be overridden), so I'm not sure why your submenus are so wide without looking at the code:
.is-dropdown-submenu {
position: absolute;
top: 0;
left: 100%;
z-index: 1;
display: none;
min-width: 200px;
border: 1px solid #cacaca;
background: #fefefe;
}
 

Roy Six commented on Ron Huppert's post almost 2 years

I haven't experienced this, but I recently started to make the Foundation buttons have a border-radius of 3px so they're at least rounded a tiny bit. This was more so for aesthetics, but some people may still be adjusting to the completely rectangle buttons often found in flat design. I'd maybe consider adding a "join" icon preceding the text in the button, but I would not add animations since it could annoy users. Without having a chance to look at it, I'm guessing people are seeing your button, but aren't realizing it's a button -- otherwise, I'd suggest looking at the overall design of the page itself and placement/prominence of the button on small / medium / large screens.

Posts Followed





  • 3
    Replies
  • Off-Canvas menu not animated

    By Jakob Degler

    menu

    Hello Can I get some help? I am trying to put a off-canvas menu together, but it just pops up and does not slide in smoothly. ( like in the docs :&nbsp;https://foundation.zurb.com/sites/docs/off-canvas.html#&nbsp;) ( I have just begun, so the site is n... (continued)

    Last Reply by Jakob Degler almost 2 years ago







Following

    No Content

Followers

My Posts

My Comments

You commented on Fabio Vaz's post about 1 year

Hi Dylan, apologies for any confusion!
Yes, this was just a simple mistake on their part for the 6.4.1 release when it came out, the developers just forgot to include the align-center CSS for those two specific builds (Essential and Complete). It was fixed in the next version of Foundation (6.4.2), so all current versions now should be consistent with this (or at least I think so!).
If you were using 6.4.1 in your projects, that may be why you had to adjust the align. It's great that you were able to fix it yourself.

You commented on Michael Barthel's post over 1 year

Hi Michael,
This was an issue brought up before in the older 6.x versions (although the solutions were usually varied). For your site though, when I test the "Schedule a Test Drive" modal, removing the "position: fixed !important;" being applied in the below CSS no longer makes the page jump up top for me (on Chrome at least). Although, I'm guessing you had this extra little bit of CSS in there to solve a different problem:
body.is-reveal-open {
position: fixed !important;
width: 100%;
}
Hope this helps point you in the right direction,
Roy

You commented on Erik Krause's post almost 2 years

Hi,
It's because in Foundation, Magellan's default data-threshold is 50px and your top-bar's height is ~55px without any margin space between #first and the top-bar itself at the very top of the page. If you are OK with a slightly bigger threshold to accommodate the sticky top-bar, you can just add data-threshold="55" to your data-magellan element as a quick-fix.
Also, just a heads up!: in the codepen, you have two data-magellan elements, and the foundation CSS being linked to is for the new xy-grid, but the HTML is using float-grid classes like row and column.
Hope this helps a little.

You commented on Kevin Neal's post almost 2 years

I would say block is still needed in some situations. It's the best way to configure a grid's rows to only have X number of cells (assuming X is not 12!).
One example for using it is when you are iterating across several items. You don't know how many items you have, but you know you want them laid out as 4 cells per row. Without the block grid (and only using "auto" or "small-#" cells), you would have to write extra code to keep track of when you got to every 4th item, close the grid-x div, open a new grid-x div, and repeat.

 
 

You commented on Jakob Degler's post almost 2 years

Hi,
I'm not sure if this addresses the hover issue, but the developers made the design decision to auto-focus the first anchor when you open the off-canvas. You may need to add an attribute data-auto-focus="false" in the off-canvas, like this:
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-auto-focus="false">

If this does not work, I would try adding an "invisible" placeholder anchor as the first element of the off-canvas, like this:
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
<a style="display: none;"></a>
<!-- My off-canvas content goes here -->
</div>

You commented on Jakob Degler's post almost 2 years

Hi, this is just a guess, but I think there's something wrong inside your app.css where you keep your foundation styles:
<link rel="stylesheet" href="css/app.css">
I went to your site and simply changed the href to point to the latest 6.4.3 foundation.css off of CDN, and the off-canvas worked fine after that. So it doesn't seem to be an HTML or JS issue. I'm not totally familiar with installing foundation via package managers like npm/bower, but I would look into how your app.css is being generated.

You commented on Gregor's post almost 2 years

Hi, going by the code you posted in the first post, you should contain the images into their own individual cell divs (you're making the images cells themselves). Here's a codepen with the markup corrected to how I would write it, so that all 12 images sit on one line with no breaks. 
https://codepen.io/sixs/pen/MEqvRM
Also, I'm not sure what the intent was with the first div small-centered in your code, but if you want to make everything centered, you'd add a grid-container (which defines a max-width) and contain the grid-x.

You commented on Craig Wright's post almost 2 years

Indeed Nigel, Nik's grid-frame code is almost there, but needs some modifications to work as we want. There's also another way: we could go lower-level and use Foundation's vanilla flexbox utility classes. So, these are the two methods so far with codepens and notes showing how they can be used to make the footer stay pushed down. 
1. Foundation Vanilla Flexbox Utility Classes

Codepen Example
Notes: Requires two modifications by making .flex-container have a height of 100vh and adding a .flex-child-no-shrink class to prevent divs from shrinking

 
2. Foundation Grid-Frame

Codepen Example
Notes: Requires three modifications by making .grid-container have overflow for the scrollbar to be visible and adding a .cell.no-shrink to prevent shrinking and .cell.grow class to make the main content div grow/expand

(Sorry, I would link to the docs, but I'm afraid I'll get flagged with too many links.)
It seems this is still being worked on by the developers and we should continue to revisit this to see if they add more classes that will allow for no modifications.

You commented on Pratiba Premkumar's post almost 2 years

Can you show us some code (link us to the website or post a codepen)? Are you using dropdown submenus?
Foundation's (v6.4.2) dropdown submenu width is set in the following CSS, but it only applies a min-width (the computed width ends up being auto, which can be overridden), so I'm not sure why your submenus are so wide without looking at the code:
.is-dropdown-submenu {
position: absolute;
top: 0;
left: 100%;
z-index: 1;
display: none;
min-width: 200px;
border: 1px solid #cacaca;
background: #fefefe;
}
 

You commented on Ron Huppert's post almost 2 years

I haven't experienced this, but I recently started to make the Foundation buttons have a border-radius of 3px so they're at least rounded a tiny bit. This was more so for aesthetics, but some people may still be adjusting to the completely rectangle buttons often found in flat design. I'd maybe consider adding a "join" icon preceding the text in the button, but I would not add animations since it could annoy users. Without having a chance to look at it, I'm guessing people are seeing your button, but aren't realizing it's a button -- otherwise, I'd suggest looking at the overall design of the page itself and placement/prominence of the button on small / medium / large screens.

Posts Followed

Following

  • No Content

Followers