Menu icon Foundation

Developer

My Posts

  • NEW
  • foundation wit vue.js

    By Guy Van Bael

    vue.js

    Hi, I'm trying to combine foundation with vue.js. The problem i keep running into is this. Foundation javascript components don't work on items that are added/changed to the dom using a computed property. Can anyone help me how to reinit the foundation... (continued)


  • 1
    Reply
  • upgrading node.js

    By Guy Van Bael

    foundation 6node.js

    I'm a heavy foundation user for a few years now. But i have some new projects coming up for which i would like to use vue.js. Therefore i probably have to upgrade my node version. The latest at this moment is 6.10.1. The one that's currently installend on... (continued)

    Last Reply by Shna Galindo 3 months ago









My Comments

Guy Van Bael commented on Jay Todtenbier's post 5 months

Don't know why it's not in the app.scss. Problably slipped out when implementing the component...

Guy Van Bael commented on Jay Todtenbier's post 5 months

add this to your app.scss to the list of includes (i presume you're using the sass version).
@include foundation-card;
 

Guy Van Bael commented on Guy Van Bael's post about 1 year

It is fixed in the upcoming 6.2.2 release. In the meantime, i'm adding the parent link manually.

Guy Van Bael commented on Guy Van Bael's post about 1 year

Check out this link on a mobile phone. The drilldown menu doesn't include the parent link although data-parent-link option on the drilldown menu is set to true.
 
http://phobostestbe.webhosting.be/dentalmission/

Guy Van Bael commented on Rafi Benkual's post about 1 year

Is there a command to update? I'm using 6.2.0 on 2 projects (not finished yet) already
 
thx
guy

Guy Van Bael commented on Guy Van Bael's post over 1 year

It was never gone, but i was under the impression that it wasn't being maintained.
In F6 hower it's still there, but the markup has changed and i can't find the timer (progress bar) anymore, so i guess they refactored the code.

Guy Van Bael commented on Guy Van Bael's post over 1 year

It seems that this solution hasn't been merged in 6.0.6. I don't like changing core files, so i hope this issue will be adressed soon. In the meantime, i'm not using F6 for production.

Guy Van Bael commented on Guy Van Bael's post over 1 year

Hi Rafi, i added this and now links are working on dropdown on the desktop. On touch device (tested on my Google Nexus 7 tablet) hower none of the links are working. Here's my code (trying to recreate F4 en F5 topbar navigation system). I also noticed that drilldown is alway stretching down as far as the longest list, which looks a bit strange when user is at another level with less menuitems.

<section class="row">
  <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
  <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" data-dropdown-menu data-click-open="false" style="width: auto;">
  <li class="has-submenu">
    <a href="http://www.google.be" target="_blank">To Google</a>
    <ul class="vertical submenu menu" data-submenu id="m2">
      <li class="has-submenu">
        <a href="#">Item 1A</a>
        <ul class="vertical submenu menu" data-submenu id="m3">
          <li><a href="http://www.phobosenactor.be" target="_blank">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 2</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 3</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>
  </div>
</div>
</section>

Guy Van Bael commented on Guy Van Bael's post about 2 years

Hi Rafi,

Adding this code snippet does create an href on the parent item, but - as stated in the workaround link you mentioned - the submenu doesn't slide in anymore because the page is reloaded because of the href to the parent item..

I think topbar should have 2 clickable spots on touch devices. One to navigate to the parent-item (href) and one to slide out the submenu (arrow?).

Thanks for checking out! You guys are awesome.

Guy Van Bael commented on Guy Van Bael's post about 2 years

Hi Rafi,

Problem still occurs. Double cliccking on parent item doesn't do anything (device i used was a google nexus 7 tablet).

Posts Followed

  • 4
    Replies
  • F6.3 Cards Styling Missing?

    By Jay Todtenbier

    f6.3card

    I copied the example code verbatim from the documentation. There does not appear to be any card-related css being applied. For example there are no background colors, padding or dividing lines. However, the responsive menu and grid appear to be working co... (continued)

    Last Reply by Guy Van Bael 5 months ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Jay Todtenbier's post 5 months

Don't know why it's not in the app.scss. Problably slipped out when implementing the component...

You commented on Jay Todtenbier's post 5 months

add this to your app.scss to the list of includes (i presume you're using the sass version).
@include foundation-card;
 

You commented on Guy Van Bael's post about 1 year

It is fixed in the upcoming 6.2.2 release. In the meantime, i'm adding the parent link manually.

You commented on Guy Van Bael's post about 1 year

Check out this link on a mobile phone. The drilldown menu doesn't include the parent link although data-parent-link option on the drilldown menu is set to true.
 
http://phobostestbe.webhosting.be/dentalmission/

You commented on Rafi Benkual's post about 1 year

Is there a command to update? I'm using 6.2.0 on 2 projects (not finished yet) already
 
thx
guy

You commented on Guy Van Bael's post over 1 year

It was never gone, but i was under the impression that it wasn't being maintained.
In F6 hower it's still there, but the markup has changed and i can't find the timer (progress bar) anymore, so i guess they refactored the code.

You commented on Guy Van Bael's post over 1 year

It seems that this solution hasn't been merged in 6.0.6. I don't like changing core files, so i hope this issue will be adressed soon. In the meantime, i'm not using F6 for production.

You commented on Guy Van Bael's post over 1 year

Hi Rafi, i added this and now links are working on dropdown on the desktop. On touch device (tested on my Google Nexus 7 tablet) hower none of the links are working. Here's my code (trying to recreate F4 en F5 topbar navigation system). I also noticed that drilldown is alway stretching down as far as the longest list, which looks a bit strange when user is at another level with less menuitems.

<section class="row">
  <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
  <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" data-dropdown-menu data-click-open="false" style="width: auto;">
  <li class="has-submenu">
    <a href="http://www.google.be" target="_blank">To Google</a>
    <ul class="vertical submenu menu" data-submenu id="m2">
      <li class="has-submenu">
        <a href="#">Item 1A</a>
        <ul class="vertical submenu menu" data-submenu id="m3">
          <li><a href="http://www.phobosenactor.be" target="_blank">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 2</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 3</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>
  </div>
</div>
</section>

You commented on Guy Van Bael's post about 2 years

Hi Rafi,

Adding this code snippet does create an href on the parent item, but - as stated in the workaround link you mentioned - the submenu doesn't slide in anymore because the page is reloaded because of the href to the parent item..

I think topbar should have 2 clickable spots on touch devices. One to navigate to the parent-item (href) and one to slide out the submenu (arrow?).

Thanks for checking out! You guys are awesome.

You commented on Guy Van Bael's post about 2 years

Hi Rafi,

Problem still occurs. Double cliccking on parent item doesn't do anything (device i used was a google nexus 7 tablet).

Posts Followed

Following

  • No Content

Followers

  • No Content