I'm using Bootstrap with an Ember project, and following markup produces navigation tabs that work on the desktop, but fail in Chrome & Safari the iPhone 6.
Here is the markup produced:
<nav>
<ul class="nav nav-tabs">
<li id="ember611" class="ember-view active">
<a>Tab 1</a>
</li>
<li id="ember612" class="ember-view">
<a>Tab 2</a>
</li>
</ul>
</nav>
Tapping on Tab 2 doesn't work. Any suggestions?
Here is the HtmlBars that produces this HTML:
<nav>
<ul class="nav nav-tabs">
{{#link-to "foo.bar.tab1" tagName="li" role="presentation"}}
<a href={{view.href}}>Matches</a>
{{/link-to}}
{{#link-to "foo.bar.tab2" tagName="li" role="presentation"}}
<a href={{view.href}}>Standings</a>
{{/link-to}}
</ul>
</nav>
I'm using Bootstrap 3.3.4, and Ember 1.3
You're using your li elements as links when they really shouldn't be. That will work in some browsers but it's non-standard. I usually do something like this:
{{#link-to 'foo.bar.tab1' tagName='li' href='false'}}
{{link-to 'Matches' 'foo.bar.tab1' role='presentation'}}
{{/link-to}}
This will make the a tag the actual link (which will work across browsers), but will still add the active class to the li elements.
Related
I am using Foundation 6.7.4.
I am trying to set up an accordion like the one in their example here https://get.foundation/sites/docs/accordion.html
I have my accordion set up as such:
<div class="grid-x">
<div class="medium-12 cell">
<ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
My Title
</a>
<div class="accordion-content" data-tab-content>
My content
</div>
</li>
</ul>
</div>
</div>
When I click the A tag I can see the Accordion expand for a fraction of a second before closing. I can also see the CSS classes and attributes change in the inpector.
But I'm unsure why none of these are sticking and what's causing the accordion to revert its's self.
Would anyone know why?
Turned out this was because I had 2 foundation.js files referenced.
I copied the foundation navbar syntax straight from their site https://foundation.zurb.com/sites/docs/top-bar.html and the dropdown menu feature doesnt seem to be working
Here's the code:
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
Here's what it looks like
Make sure to initialize foundation:
$(document).foundation();
I had the same issue -
This appears to be a known issue with Foundation 6.2 ~ 6.4 - at least for Rails apps using the foundation-rails gem.
The fix was to update the foundation_and_overrides.scss include order, move
#include foundation-dropdown-menu;
to the bottom as per here
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">
One
<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>Two</li>
<li>Three</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">
One
<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">
One
<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">One</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">
'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 as a "Single Page Application" framework loads page content dynamically all the time. I don't have tested it, but I think you have to re-apply foundation after ajax content is loaded.
You can do it calling foundation 'reflow' in the attached view-model method:
attached() {
$(document).foundation();
}
I'm using ember.js with handlebars, and it seems external URL cannot be reached without a script. I put a link to www.google.com to test and it never fires! Is there something I am missing on?
<script type="text/x-handlebars" data-template-name="subusers">
<div class="click-nav" {{action 'toggleDdSubusers'}}>
<ul class="no-js" >
<li>
<a class="clicker">
{{render 'currentsubuser'}}
</a>
<ul class="filter-options">
{{#each subuser in model}}
{{#unless (equals subuser.id currentSubuserInfos.id)}}
<li>
<a href="http://www.google.com">
<span class="profileimg">{{{subuser.profileImage}}}</span>{{subuser.name}}<span class="numbers"> ({{subuser.openedConvCount}})</span>
</a>
</li>
{{/unless}}
{{/each}}
</ul>
</li>
</ul>
</div>
</script>
I still don't know why I got this behavior on my app. What I did to solve my problem is I put an action on my li and send the wanted redirect URL as a function parameter.
In this action, I simply manually redirect with : window.location.href = paramUrl.
0 release!
I am having a weird problem rendering CSS under Ember.js. It is weird because the just works fine after manually refreshing the page, and in plain HTML without Ember. I have tried different browsers and different CSS libraries and all the same.
I just want to render tabs inside a handlebars template, I have tried both Zurb Foundation sections and jQuery-ui tabs and both work only after manual page refresh.
I have tried to reproduce the problem with JSBin but it didn't work. I am using the example code from both libraries to do this.
Here is my HTML with Zurb Foundation 4.3: (referencing js and css libraries omitted for brevity)
<html>
<body>
<script type="text/x-handlebars">
<nav class="top-bar" data-options="is_hover=false">
<ul class="title-area">
<li class="name">
<h1>Main</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left show-on-small">
<li>{{#linkTo 'families'}}Families{{/linkTo}}</li>
</ul>
<ul class="left">
<li>{{#linkTo 'charities'}}Charities{{/linkTo}}</li>
</ul>
</section>
</nav>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="families">
<div class="row display">
<div class="large-3 columns">
<span>{{#linkTo 'families.details'}}list{{/linkTo}}</span>
</div>
<div class="large-9 columns">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="families/details">
<div class="row">
<span>details</span>
</div>
<div class="row">
<section class="section-container auto" data-section data-section-small-style>
<section class="active" >
<p class="title" data-section-title>Family Info</p>
<div class="content" id="panel1" data-section-content>
<span>Family Info goes here</span>
</div>
</section>
<section>
<p class="title" data-section-title>Members</p>
<div class="content" data-slug="panel2" data-section-content>
<span>Family members list goes here</span>
</div>
</section>
</section>
</div>
</script>
</body>
</html>
My Javascript:
App = Em.Application.create();
App.Router.map(function() {
this.resource('families', function() {
this.route('details');
});
this.resource('charities');
});
Just wanted to know if there are any known issues or caveats between Ember/handlebars and CSS.
Thank you.
EDIT: Got a sample running at http://jsbin.com/iTOsof/3 but does not work after refresh like local host
I am guessing the reason it's not working is because Foundations JavaScript handler is being run when the DOM fires its ready event, at that point Ember haven't rendered its templates so there's nothing to tie the tabs to.
What you could try to do is to add $(document).foundation(); to the DetailsViews didInsertElement.
App.DetailsView = Ember.View.extend({
didInsertElement: function() {
$(document).foundation('section'); // this will only load the section component
}
});
One issue though, since Foundation's JavaScript components are not compatible with Ember you will most likely run into problems when Foundation appends their location hash for the selected section since Ember is using the same method to handle its routing.
You can change Embers location method to a modern variant by specifying:
App.Router.reopen({
location: 'history'
});
This will however not be compatible with IE 9 and below.
Another alternative is to use Bootstrap as an alternative to Foundation (personally I prefer Foundation over Bootstrap but in this case it may be worth it if you don't want to create your own components in Ember), and then use the Ember Components made available for Bootstrap, http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs-panes