Aurelia is emitting different css code in Foundation using a dropdown menu when compared to the same page when using the regular method

Question

System Info:

Windows 7 x64

aurelia-framework: "^1.0.0-beta.1.1.3"

"foundation-sites": "^6.2.1"

skeleton-navigation-webpack

How do I get the css code emitted when using aurelia and foundation together to be the same as when using foundation alone in a standard web page? This is causing the dropdown to work incorrectly.

I am using the skeleton-navigation-webpack and just substituting foundation html and css for nav-bar and a empty welcome page

Aurelia Code

main.js to initialize foundation framwork

 aurelia.start().then(a => a.setRoot('app', document.body))
    .then(a => {
      // Initialize any frameworks you want to use
       $(document).foundation();
      console.log('foundation loaded')
    });

The initialization of foundation $(document).foundation(); seems to work as the dropdown menu is displayed and working but the css is slightly different

nav-bar.html snippet before code is emitted

      <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
        <li class="has-submenu">
          <a href="#">One</a>
          <ul class="submenu menu vertical" data-submenu>
            <li repeat.for="row of router.navigation">
              <a href.bind="row.href">${row.title}</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>

Importing the foundation css in Aurelian and link in standard html page. The only difference is in the html page in using the repeat.for for <li> via Aurelia

emitted code in Aurelia

<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="x96kho-dropdown-menu">
        <li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
          <a href="#" tabindex="0">One</a>
          <ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
            <!--<view>--><li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
              <a href.bind="row.href" class="au-target" au-target-id="1" href="#/">Welcome</a>
            </li><!--</view>--><!--<view>-->

Standard html page

<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdownmenu="nfmerw-dropdownmenu" data-responsivemenu="8q9bqc-responsivemenu">
      <li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
        <a href="#" tabindex="-1">One</a>
        <ul class="submenu menu vertical is-dropdown-submenu first-sub js-dropdown-active" data-submenu="" aria-hidden="false" tabindex="-1" role="menu">
          <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" tabindex="0"><a href="#" tabindex="-1">One</a></li>

One specific is the open-left class in the first <li>

   <li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">

Verse the is-down arrow is active

<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">

But what is the question? Do you want to know why, do you want to solve it, is one working better then the other? — Randy
randy, updated question to make it more clear as to what I am looking for — dan

Randy Randy · Accepted Answer · 2016-04-22T07:14:51

'reflow' is not Foundation 6, I instead use

attached(){
  // refresh JS after DOM is loaded
  $(document).foundation();
}

I can't test if this works better helping you out on the different CSS, but I do know this is the new reflow.

Answer found here: Foundation 6 & Reflow. I tested the reflow functionality, it works.

Aurelia is emitting different css code in Foundation using a dropdown menu when compared to the same page when using the regular method

2 Answers