This is likely due to the use of :first-child :last-child :nth-child css pseudo selectors, unfortunately these pseudo selectors also take script tags into account. This can cause some annoying issues, but luckily first-of-type last-of-type nth-of-type selectors can usually be used in-place.

It is likely zurbs css will have to be adapted.

If you have no access to the CSS you can use the #collection helper which doesn't generate script tags.

<div class="twelve columns">
  <h3>My Notes</h3>
  {{#collection controller tagName="ul" classNames="block-grid four-up mobile-two-up"}}
    {{view Ember.TextArea classNames="sticky-note" valueBinding="view.content"}}
  {{/collection}}
  {{outlet}}
</div>

Thanks guys, @stefanpenner was right, changing :nth-child to :nth-of-type in Zurb's .block-grid structure fixed the problem. Good to know!

I think this needs to find its way into the guides, if its not already there...

What about setting itemViewClass="Ember.View" on each helper? http://jsbin.com/adedag/53/edit

@stefanpenner those metamorph tags breaks .btn + .btn style also. Any thought?

Update, the #collection helper does not seem to be supported as of ember 1.0.0 anymore, so the only way to solve this is to use :last-of-type

I'm trying to use Zurb Foundation's Clearing lightbox, and am running into a similar issue. Mien seems to stem from the JS's use of next() and prev(), not the CSS.

Is there any better workaround than messing with the Foundation code? I know my model won't be changing, so it would be great if there was an option to skip the "metamorph" tags here...

In the end I ended up using an Ember.CollectionView, which doesn't seem to litter metamorphs about. Based on this: http://stackoverflow.com/questions/11748164/ember-js-and-jquery-sortable-how-to-work-around-the-metamorph-scripts

I ran into this today. This will no longer be an issue with HTMLBars, correct?

@samselikoff correct

Re @manoharank's question about fixing .btn + .btn style selectors, I fixed this by changing the selector from:

h1 + p {
  text-align: center;
  margin-bottom: 30px;
}

to:

h1 ~ p:first-of-type {
  text-align: center;
  margin-bottom: 30px;
}

@MaxGabriel Nice

FYI: this is fixed with the introduction of the metal-views library in 1.8, which is currently in beta and scheduled for release on 2014-10-24

Yeah this is still broken in Foundation 5. Foundation has even switched over to using nth-of-type, and messing with this didn't fix any of the grid layout problems.

Anyone had any luck getting this to work? I'm on Ember 1.10

1.10 adds no extra elements, so not sure what the issue could be.

Same, I also can confirm that Skeleton and Bootstrap responsive grids do not work with Ember-CLI current beta release of 0.2 with Ember 1.10. I don't have time now to post a JS fiddle or any of that but it's the same problem described here with every responsive grid I've attempted to use.

can you provide an example?