Menu icon Foundation

Coder | Greater Houston, TX

My Posts


  • 5
    Replies
  • F6 Flex Grid Issue/Bug

    By Aaron J.

    F6flex-gridtop-bar

    I seem to have an issue with sizing and the flex grid... maybe a bug.. Simple premise, 4 boxes in one row. For small, I want to stack the first two boxes at 50% each, then stack the latter two at 100%. My code seems to work fine with the initial layo... (continued)

    Last Reply by Aaron J. almost 3 years ago


My Comments

Aaron J. commented on Aaron J.'s post almost 3 years

Hi Rafi,
Been a while.. I needed to step back given the joy and pain... so here is what I learned since...

Box-shadow: It sort-a created issues... the real issue was the margin-right I added push shadowed boxes over when floating (prior to flex-grid). I was able to work around that by clearing the right margin.

The other issue I was seeing was/is that IE does not like F6 shorthand classes [size]-unstack. If you don't use small-xx medium-xx ... in the containers IE/Edge defaults to unstack on all.

Agreed, I love the flexible ordering per size.

Overall, I am enjoying the FlexBox -- but shrink is still a but of hit and miss...

Aaron J. commented on Aaron J.'s post almost 3 years

Basically, I confirmed what I believe was causing my issue. I added shadows to the flex-grid containers, and right margin via CSS. IE seems to not include the margin part as of 100%, and causes 2 50% containers to wrap. And/or it seems to mess-up the 100% calculation and extend the window port.

Not really sure who is at fault per. Margin and shadows, IMO should be part of the 100%, but I believe the spec says they (or one of) are not... Browsers vary on how that gets calculated for sure...

So, in the end, I can work around it in various ways... e.g., remove margins in my CSS, that I added to push way from the shadows... wrap less formatted tags...

Aaron J. commented on Aaron J.'s post almost 3 years

Hi Rafi,

Yes -- that was my first time using Flexbox. I ended up tweaking the design to avoid the issue. Hence, I did not split the two boxes. And I have been able to split other using similar with other code. Thus - two things came to mind. First, there was something my code triggering the behavior, although I am not sure that anything incorrect, per ce, but was done chasing ghosts since the two units of code were pre-existing components -- I was not thrilled with the idea of digging deep into the code, just to shoe-horn into the grid. BUT I think I could have to do with shadowed boxes, since the shadow extends, some browsers may have been compensating... and maybe 2 boxes was 1 to many and the extra scroll space to the right was generated... Was my leading theory after I moved on, but hat not re-tested.

The 2nd note, is that, I started tracking very different behavior with IE 11 -- which does not seem to enjoy the Flex Grid consistently. I was going back and forth, before really catching that. But I was fair sure the issue here was most prominent is IE and IE mobile; but did surface on others.

To your other question: After some iterations and scars, I enjoy many aspects of the FlexBox, and it has helped since I am only concerned up-to-date browsers. It's a learning process... Re-ordering FlexBoxes is very handy. BUT getting the sizing just right with expected responsive behaviors is NOT as easy I would like. It could be my patterns, but shrink does not seem to do much for me. Again, could be my coding, but this one area has cause me to spend more time than planned. I have just about given up on shrink, at still mix in floating as much more efficient or easier... so.. 60/40 so far, improving slowly.

As far as my issue here, I should go back and look again. I have retro-fitted much of the surrounding code to be more F6 tolerant, and my issue could be gone. It started with 6.0x... thus maybe it's worth a revisit with 6.1.x. I will advise on that later.

Regards.
AJ

Aaron J. commented on Steven Muncy's post almost 3 years

I agree with Doug, IMO the change to bind sticky to everything was inane. It provides some handy features on it's own, but it should have never been connected to the Top-Bar, and creating fixed menus thereafter. It's way too complicated --even though it can be made to work. It's horribly flawed with delay in re-draw issues, and more. And to top it off, it's way under-documented.

There is a post a few weeks ago, that basically get through it. Summarized, you need a tag outside of the sticky container, like (not with a full closing tag).

Then the sticky container... wrapping the whole menu
Then the menus inside,

<div id="tmStick" />

    -div data-sticky-container-
        <div class="sticky" data-sticky data-options="stickyOn:small;marginTop:0;anchor:tmStick" style="width:100%" >
            <div class="title-bar" data-responsive-toggle="TopMenu" data-hidefor="medium" style="width:100%" >
                <div class="title-bar-left">
                    <button class="menu-icon" type="button" data-toggle></button>
                    <div class="title-bar-title">Menu</div>
                </div>                
                <div class="title-bar-right">
                    <div class="title-bar-title">
                    </div>                 
                </div>
            </div>

            <div class="top-bar" id="TopMenu">
                <div class="top-bar-left">
                    <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

Aaron J. commented on Alex Laforge's post almost 3 years

Alex, your not crazy -- at least regarding the lack of meaningful and accurate documentation and examples.

Site examples use data options that are not documented in F6 anywhere. Like submenu, has-submenu are in many examples; but seem to be leftover from F5. The couple options mentioned in the text don't work and are not detailed e.g, data-responsive-menu??? I have had zero success... .Ridiculously under-baked, IMO, as it was not part of my plans to be alpha/beta testing F6... including the documentation...

Aaron J. commented on Yan Wong's post almost 3 years

I hear what you are saying Brian, but I am not in that camp. Sticky is fine on its own as a separate component, IMO. I preferred the top-bar with a fixed data attribute to.... well.... be a "fixed" bar at The Top (simple idea, should be easy has heck). My 2 cents, says is fundamentally a mistake merging the two concepts as catch-all... It has been nothing short of a nightmare after you start introducing other components... For example, I have had issues with Reveal, Magellan, and others... weird behaviors to broken...

From what I can tell, the majority of MY issues are derivatives of dealing with the sticky/sticky container to persist a Top-Bar. For my tastes, a fixed top-bar is core and elementary... I should be... and it was .... Now, the hours are mounting dealing with the derivative issues... I am almost ready to punt....

Sorry, I think I just wanted to vent briefly... :-)

-aj

Aaron J. commented on Peter Collinson's post about 3 years

I have a similar issue. In F5, all worked well enough. In F6, worked, only w/o overlay in 6.03. By the time I added sticky and the workarounds to get that to function, reveal would not close the Reveal Box that is inline. My sample has two two reveal boxes lauched from the sticky menu. The issue is only with the Reveal that has the actual reveal contents in-line with the sticky nav/title bar.

If I take the animation away, it works though...

Sample Code is at :

https://onedrive.live.com/redir?resid=B6C922E4D9DDAE78!11211&authkey=!AMXxVUc1qxukjX0&ithint=file%2ctxt

Regards,`

Aaron J. commented on Tim Logemann's post about 3 years

EXTREMELY disappointing the only method is to push the content, Bah, it's hard finding any site that reveal off-canvas menus this way... (and for good reason IMO). More disappointing was why it was not added... shocking really.

As I am new to Foundation (couple months), figured I would stop with F5, and go with F6 before getting too deep... so far, I am deeply regretting as the core reason for me is about responsive menus and such... sticky containers, off-canvas with push, all this combined just does not produce equivalent functionality with a persistent Top Bar, and Magellan... I had all this working in a couple hours with my intro to F5. After week (many hours per day), F6 seems under baked for prime time; if anyone is expecting to save time, that is on contract to F5.

Glad for the question and answer/alternative, albeit, not the same.

Posts Followed





  • 11
    Replies
  • F6 offcanvas overlap

    By Tim Logemann

    foundation 6offcanvasoverlap

    In Foundation 5 getting the offcanvas to overlap instead of push was really easy. In Foundation 6 not so much, the Foundation 5 way doesn't work anymore (like I expected) and there are no signs of this on the docs. Is it still possible to get the offca... (continued)

    Last Reply by YH almost 2 years ago


Following

    No Content

Followers

My Posts


My Comments

You commented on Aaron J.'s post almost 3 years

Hi Rafi,
Been a while.. I needed to step back given the joy and pain... so here is what I learned since...

Box-shadow: It sort-a created issues... the real issue was the margin-right I added push shadowed boxes over when floating (prior to flex-grid). I was able to work around that by clearing the right margin.

The other issue I was seeing was/is that IE does not like F6 shorthand classes [size]-unstack. If you don't use small-xx medium-xx ... in the containers IE/Edge defaults to unstack on all.

Agreed, I love the flexible ordering per size.

Overall, I am enjoying the FlexBox -- but shrink is still a but of hit and miss...

You commented on Aaron J.'s post almost 3 years

Basically, I confirmed what I believe was causing my issue. I added shadows to the flex-grid containers, and right margin via CSS. IE seems to not include the margin part as of 100%, and causes 2 50% containers to wrap. And/or it seems to mess-up the 100% calculation and extend the window port.

Not really sure who is at fault per. Margin and shadows, IMO should be part of the 100%, but I believe the spec says they (or one of) are not... Browsers vary on how that gets calculated for sure...

So, in the end, I can work around it in various ways... e.g., remove margins in my CSS, that I added to push way from the shadows... wrap less formatted tags...

You commented on Aaron J.'s post almost 3 years

Hi Rafi,

Yes -- that was my first time using Flexbox. I ended up tweaking the design to avoid the issue. Hence, I did not split the two boxes. And I have been able to split other using similar with other code. Thus - two things came to mind. First, there was something my code triggering the behavior, although I am not sure that anything incorrect, per ce, but was done chasing ghosts since the two units of code were pre-existing components -- I was not thrilled with the idea of digging deep into the code, just to shoe-horn into the grid. BUT I think I could have to do with shadowed boxes, since the shadow extends, some browsers may have been compensating... and maybe 2 boxes was 1 to many and the extra scroll space to the right was generated... Was my leading theory after I moved on, but hat not re-tested.

The 2nd note, is that, I started tracking very different behavior with IE 11 -- which does not seem to enjoy the Flex Grid consistently. I was going back and forth, before really catching that. But I was fair sure the issue here was most prominent is IE and IE mobile; but did surface on others.

To your other question: After some iterations and scars, I enjoy many aspects of the FlexBox, and it has helped since I am only concerned up-to-date browsers. It's a learning process... Re-ordering FlexBoxes is very handy. BUT getting the sizing just right with expected responsive behaviors is NOT as easy I would like. It could be my patterns, but shrink does not seem to do much for me. Again, could be my coding, but this one area has cause me to spend more time than planned. I have just about given up on shrink, at still mix in floating as much more efficient or easier... so.. 60/40 so far, improving slowly.

As far as my issue here, I should go back and look again. I have retro-fitted much of the surrounding code to be more F6 tolerant, and my issue could be gone. It started with 6.0x... thus maybe it's worth a revisit with 6.1.x. I will advise on that later.

Regards.
AJ

You commented on Steven Muncy's post almost 3 years

I agree with Doug, IMO the change to bind sticky to everything was inane. It provides some handy features on it's own, but it should have never been connected to the Top-Bar, and creating fixed menus thereafter. It's way too complicated --even though it can be made to work. It's horribly flawed with delay in re-draw issues, and more. And to top it off, it's way under-documented.

There is a post a few weeks ago, that basically get through it. Summarized, you need a tag outside of the sticky container, like (not with a full closing tag).

Then the sticky container... wrapping the whole menu
Then the menus inside,

<div id="tmStick" />

    -div data-sticky-container-
        <div class="sticky" data-sticky data-options="stickyOn:small;marginTop:0;anchor:tmStick" style="width:100%" >
            <div class="title-bar" data-responsive-toggle="TopMenu" data-hidefor="medium" style="width:100%" >
                <div class="title-bar-left">
                    <button class="menu-icon" type="button" data-toggle></button>
                    <div class="title-bar-title">Menu</div>
                </div>                
                <div class="title-bar-right">
                    <div class="title-bar-title">
                    </div>                 
                </div>
            </div>

            <div class="top-bar" id="TopMenu">
                <div class="top-bar-left">
                    <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

You commented on Alex Laforge's post almost 3 years

Alex, your not crazy -- at least regarding the lack of meaningful and accurate documentation and examples.

Site examples use data options that are not documented in F6 anywhere. Like submenu, has-submenu are in many examples; but seem to be leftover from F5. The couple options mentioned in the text don't work and are not detailed e.g, data-responsive-menu??? I have had zero success... .Ridiculously under-baked, IMO, as it was not part of my plans to be alpha/beta testing F6... including the documentation...

You commented on Yan Wong's post almost 3 years

I hear what you are saying Brian, but I am not in that camp. Sticky is fine on its own as a separate component, IMO. I preferred the top-bar with a fixed data attribute to.... well.... be a "fixed" bar at The Top (simple idea, should be easy has heck). My 2 cents, says is fundamentally a mistake merging the two concepts as catch-all... It has been nothing short of a nightmare after you start introducing other components... For example, I have had issues with Reveal, Magellan, and others... weird behaviors to broken...

From what I can tell, the majority of MY issues are derivatives of dealing with the sticky/sticky container to persist a Top-Bar. For my tastes, a fixed top-bar is core and elementary... I should be... and it was .... Now, the hours are mounting dealing with the derivative issues... I am almost ready to punt....

Sorry, I think I just wanted to vent briefly... :-)

-aj

You commented on Peter Collinson's post about 3 years

I have a similar issue. In F5, all worked well enough. In F6, worked, only w/o overlay in 6.03. By the time I added sticky and the workarounds to get that to function, reveal would not close the Reveal Box that is inline. My sample has two two reveal boxes lauched from the sticky menu. The issue is only with the Reveal that has the actual reveal contents in-line with the sticky nav/title bar.

If I take the animation away, it works though...

Sample Code is at :

https://onedrive.live.com/redir?resid=B6C922E4D9DDAE78!11211&authkey=!AMXxVUc1qxukjX0&ithint=file%2ctxt

Regards,`

You commented on Tim Logemann's post about 3 years

EXTREMELY disappointing the only method is to push the content, Bah, it's hard finding any site that reveal off-canvas menus this way... (and for good reason IMO). More disappointing was why it was not added... shocking really.

As I am new to Foundation (couple months), figured I would stop with F5, and go with F6 before getting too deep... so far, I am deeply regretting as the core reason for me is about responsive menus and such... sticky containers, off-canvas with push, all this combined just does not produce equivalent functionality with a persistent Top Bar, and Magellan... I had all this working in a couple hours with my intro to F5. After week (many hours per day), F6 seems under baked for prime time; if anyone is expecting to save time, that is on contract to F5.

Glad for the question and answer/alternative, albeit, not the same.

Posts Followed

Following

  • No Content

Followers

  • No Content