Menu icon Foundation

Designer

My Posts

  • 4
    Replies
  • float grid not working on F6.4

    By banacan

    float gridgrid

    I just started a new F6.4 project and copied the markup from a small F6.3 site to start, but the grid is not working. The markup which worked with F6.3 doesn't work with F6.4. What do I need to do to use the legacy float grid? The index.html file include... (continued)

    Last Reply by sunny yadav almost 2 years ago


  • 1
    Reply
  • Topbar 5.5.3 mobile problem

    By banacan

    topbarF5

    I have a site using F5.5.3 and I am using topbar for the multi-level navigation. Everything is fine on desktop, but on mobile the menu never collapses (it is always open). I have checked that the markup is correct; I have even replaced my markup with the ... (continued)

    Last Reply by banacan almost 3 years ago


  • 9
    Replies
  • Help. Flex-video aspect ratio wrong!?

    By banacan

    flex-video

    I have placed a tall, narrow flash file inside a flex-video iframe. I set height="350" and width="250" in the iframe (this is the native video size). The flex-video div is contained in a small-6 large-4 column, and the iframe is inside of the flex-video... (continued)

    Last Reply by banacan over 4 years ago


  • 6
    Replies
  • Topbar - wish list

    By banacan

    topbarscssbreakpoint

    I have been using Foundation since version 2 and it has come a long way, and topbar has gotten better with each update. There are however a number of changes or enhancements I would love to see that would make topbar better, more flexible, and easier to ... (continued)

    Last Reply by banacan over 2 years ago




  • 2
    Replies
  • Changes to _settings.scss don't take

    By banacan

    scss

    I'm working on my first site using sass; I used CodeKit to install F 5.4.7. I followed directions and did an @import "foundation"; then @import "foundation/settings"; in app.scss. I am compiling my app.scss to css/app.css. In _settings.scss I un-... (continued)

    Last Reply by malkabanu about 5 years ago


My Comments

banacan commented on banacan's post over 2 years

Sorry, I did find the problem. I had not un-commented @include foundation-grid in my apps.scss file. Once I did that everything worked again.
I knew it had to be something simple.

banacan commented on banacan's post over 2 years

I'm using F6 menu and I ran into the same issue of reverse ordering when using align-right. However, after re-reading my above comment that I wrote two years ago - ul float right, li float left - it does works with menu; dropdown; accordion. I have not tested it with topbar but this is a major benefit for which I am grateful. Just thought I'd update this thread. Thanks.

banacan commented on banacan's post almost 3 years

I found the problem. I did not have foundation.css loading, only app.css. I thought foundation.css was included in app.css when compiling the scss file. Oh well, it is now working so I should be happy. I am.

banacan commented on banacan's post over 4 years

I tried changing to right padding as you suggested, but it made it worse. With no other ideas, I played around with the top and bottom padding. Quite surprisingly, increasing the top and bottom padding actually made it better. I must say I really don't understand this at all. Why would increasing the top and bottom padding change the aspect ratio from landscape to portrait? I would have thought it would be just the opposite.

Anyway, problem solved. But this might be a point to make in the Documentation, since it is so counter-intuitive. Thanks for continuing to reply.

banacan commented on banacan's post over 4 years

Right, but I'm saying I would bypass hosting this video on YouTube by hosting it on the production server. Therefore it will not be subject to their forced aspect ratio.

So my question remains the same. If I embed the video directly from my server in a plain vanilla containing div, the aspect ratio is correct, but it is not responsive. If I embed the video directly from my server in a div.flex-video, the aspect ratio changes. Simple as that. So what is causing the aspect ratio to change when a flex-video class is added to the containing div?

banacan commented on banacan's post over 4 years

I placed a dash (-) in front of flex-video and widescreen so they are not active classes. It's just a quick way to add/remove Foundation classes during testing. I originally tested without widescreen and I only added it after your first post. In any case, the result is the same.

So what you are saying is that I can't use flex-video because it will force the landscape ratio just like YouTube? If that is true, can you suggest how I might make this portrait ratio video flexible (responsive)?

banacan commented on banacan's post over 4 years

Rafi,

Here is a pen showing what I'm talking about: http://codepen.io/anon/pen/yNOQEr
Notice how the embed code shows the size of the iframe as 400 x 300 (4:3), even though the video I uploaded was 250 x 350. It seems that YouTube forces a landscape orientation, but does that mean flex-video should too? The point is, if I embed a flash file (stored on the production server) directly in an iframe without using flex-video, it keeps the native aspect ratio. As soon as I add the flex-video class to the containing div, it changes the aspect ratio to landscape. Why does that happen?

banacan commented on banacan's post over 4 years

Rafi,

Thanks for the reply.

I added an image to my original post showing the problem. Using Firebug, I hovered over the iframe so you can see (blue overlayed image) that the video has a 4:3 aspect ratio even though the native ratio is 5:7. Plus, I have provided the correct width and height in the iframe.

It seems to me that flex-video doesn't like portrait oriented movies. If you could find or make a video that has a portrait orientation to try, I think you'll discover the problem. I will try to upload my video to YouTube. (I having been trying to upload this video to YouTube so I can fork your pen using this video, but YouTube keeps saying "processing" and it never stops.)

banacan commented on banacan's post over 4 years

Hi Rafi,

Well it's not as easy as that. When a menu is populated dynamically the order is determined by sorting the query results. Yes, the order can be reversed but then the primary navigation links will also be backwards. It's a double-edge sword.

To keep the correct order of right-aligned submenu items, the ul element needs to be floated right and the li elements floated left. The problem, as I discovered when I made a topbar horizontal submenu, is that there was no way to float the ul right without breaking topbar. The markup and positioning that are critical to topbar functioning correctly are baked in. I tried everything, and eventually ended up reversing the order of submenu items with JS. Unfortunately that presented many other problems related to breakpoints, orientation, etc. It got so complicated and convoluted that I eventually scrapped the right-aligned navigation for left-aligned navigation, and that altered the site design in a way I wasn't happy with.

Since you are creating a whole new approach to navigation, I'm just asking that you create the markup in a way that would allow the submenu ul to be floated right and the li floated left so that the designer can determine the placement and styling. I appreciate how complex the menu elements are, and I know that getting all of the pieces working properly means making tough choices, I'm just hoping that you will attempt to build the structure with the most flexibility for positioning.

Just a STRONG suggestion on my part. Thanks for your consideration.

banacan commented on banacan's post over 4 years

Rafi,

Looking at the images of the menu bar on the page "Putting Together the Bricks and Pieces..." I notice that the right aligned menu has exactly the problem I mentioned above. That is, the order of links is reversed. Please be sure this is addressed when coding the new version.

Thanks and keep up the good work.

Posts Followed

  • 1
    Reply
  • Topbar 5.5.3 mobile problem

    By banacan

    topbarF5

    I have a site using F5.5.3 and I am using topbar for the multi-level navigation. Everything is fine on desktop, but on mobile the menu never collapses (it is always open). I have checked that the markup is correct; I have even replaced my markup with the ... (continued)

    Last Reply by banacan almost 3 years ago


Following

    No Content

Followers

My Posts







My Comments

You commented on banacan's post over 2 years

Sorry, I did find the problem. I had not un-commented @include foundation-grid in my apps.scss file. Once I did that everything worked again.
I knew it had to be something simple.

You commented on banacan's post over 2 years

I'm using F6 menu and I ran into the same issue of reverse ordering when using align-right. However, after re-reading my above comment that I wrote two years ago - ul float right, li float left - it does works with menu; dropdown; accordion. I have not tested it with topbar but this is a major benefit for which I am grateful. Just thought I'd update this thread. Thanks.

You commented on banacan's post almost 3 years

I found the problem. I did not have foundation.css loading, only app.css. I thought foundation.css was included in app.css when compiling the scss file. Oh well, it is now working so I should be happy. I am.

You commented on banacan's post over 4 years

I tried changing to right padding as you suggested, but it made it worse. With no other ideas, I played around with the top and bottom padding. Quite surprisingly, increasing the top and bottom padding actually made it better. I must say I really don't understand this at all. Why would increasing the top and bottom padding change the aspect ratio from landscape to portrait? I would have thought it would be just the opposite.

Anyway, problem solved. But this might be a point to make in the Documentation, since it is so counter-intuitive. Thanks for continuing to reply.

You commented on banacan's post over 4 years

Right, but I'm saying I would bypass hosting this video on YouTube by hosting it on the production server. Therefore it will not be subject to their forced aspect ratio.

So my question remains the same. If I embed the video directly from my server in a plain vanilla containing div, the aspect ratio is correct, but it is not responsive. If I embed the video directly from my server in a div.flex-video, the aspect ratio changes. Simple as that. So what is causing the aspect ratio to change when a flex-video class is added to the containing div?

You commented on banacan's post over 4 years

I placed a dash (-) in front of flex-video and widescreen so they are not active classes. It's just a quick way to add/remove Foundation classes during testing. I originally tested without widescreen and I only added it after your first post. In any case, the result is the same.

So what you are saying is that I can't use flex-video because it will force the landscape ratio just like YouTube? If that is true, can you suggest how I might make this portrait ratio video flexible (responsive)?

You commented on banacan's post over 4 years

Rafi,

Here is a pen showing what I'm talking about: http://codepen.io/anon/pen/yNOQEr
Notice how the embed code shows the size of the iframe as 400 x 300 (4:3), even though the video I uploaded was 250 x 350. It seems that YouTube forces a landscape orientation, but does that mean flex-video should too? The point is, if I embed a flash file (stored on the production server) directly in an iframe without using flex-video, it keeps the native aspect ratio. As soon as I add the flex-video class to the containing div, it changes the aspect ratio to landscape. Why does that happen?

You commented on banacan's post over 4 years

Rafi,

Thanks for the reply.

I added an image to my original post showing the problem. Using Firebug, I hovered over the iframe so you can see (blue overlayed image) that the video has a 4:3 aspect ratio even though the native ratio is 5:7. Plus, I have provided the correct width and height in the iframe.

It seems to me that flex-video doesn't like portrait oriented movies. If you could find or make a video that has a portrait orientation to try, I think you'll discover the problem. I will try to upload my video to YouTube. (I having been trying to upload this video to YouTube so I can fork your pen using this video, but YouTube keeps saying "processing" and it never stops.)

You commented on banacan's post over 4 years

Hi Rafi,

Well it's not as easy as that. When a menu is populated dynamically the order is determined by sorting the query results. Yes, the order can be reversed but then the primary navigation links will also be backwards. It's a double-edge sword.

To keep the correct order of right-aligned submenu items, the ul element needs to be floated right and the li elements floated left. The problem, as I discovered when I made a topbar horizontal submenu, is that there was no way to float the ul right without breaking topbar. The markup and positioning that are critical to topbar functioning correctly are baked in. I tried everything, and eventually ended up reversing the order of submenu items with JS. Unfortunately that presented many other problems related to breakpoints, orientation, etc. It got so complicated and convoluted that I eventually scrapped the right-aligned navigation for left-aligned navigation, and that altered the site design in a way I wasn't happy with.

Since you are creating a whole new approach to navigation, I'm just asking that you create the markup in a way that would allow the submenu ul to be floated right and the li floated left so that the designer can determine the placement and styling. I appreciate how complex the menu elements are, and I know that getting all of the pieces working properly means making tough choices, I'm just hoping that you will attempt to build the structure with the most flexibility for positioning.

Just a STRONG suggestion on my part. Thanks for your consideration.

You commented on banacan's post over 4 years

Rafi,

Looking at the images of the menu bar on the page "Putting Together the Bricks and Pieces..." I notice that the right aligned menu has exactly the problem I mentioned above. That is, the order of links is reversed. Please be sure this is addressed when coding the new version.

Thanks and keep up the good work.

Posts Followed


Following

  • No Content

Followers