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 5 months ago








My Comments

Guy Van Bael commented on Guy Van Bael's post 12 days

Hi Michael,
It seems to make the changes...

Guy Van Bael commented on Guy Van Bael's post 14 days

it's already in the data-options...

Guy Van Bael commented on Jay Todtenbier's post 7 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 7 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 over 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 over 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 over 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>

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 7 months ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Guy Van Bael's post 12 days

Hi Michael,
It seems to make the changes...

You commented on Guy Van Bael's post 14 days

it's already in the data-options...

You commented on Jay Todtenbier's post 7 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 7 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 over 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 over 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 over 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>

Posts Followed

Following

  • No Content

Followers

  • No Content