Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Metamorph tags being inserted between li tags; breaks styling #1893

Closed
joefiorini opened this issue Jan 26, 2013 · 18 comments

Comments

Projects
None yet
9 participants
@joefiorini
Copy link
Contributor

commented Jan 26, 2013

I'm not sure if this is an Ember issue or not, but I'm using Zurb Foundation's block grid to display a number of text areas. My template looks like:

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

In the rendered HTML there are metamorph tags in between each li. This is causing the output to look like:

Ember Stickies

If I remove all of the extraneous script tags using the Webkit Inspect it looks correct (see below), which makes me think it's an issue with having tags between li tags.

Ember Stickies-1

I noticed a number of closed issues around metamorph recently, is this already fixed?

Thanks!

@stefanpenner

This comment has been minimized.

Copy link
Member

commented Jan 27, 2013

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.

@bradleypriest

This comment has been minimized.

Copy link
Member

commented Jan 27, 2013

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>
@joefiorini

This comment has been minimized.

Copy link
Contributor Author

commented Jan 27, 2013

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

@joefiorini joefiorini closed this Jan 27, 2013

@stefanpenner

This comment has been minimized.

Copy link
Member

commented Jan 27, 2013

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

@manoharank

This comment has been minimized.

Copy link

commented Feb 1, 2013

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

@manoharank

This comment has been minimized.

Copy link

commented Apr 27, 2013

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

@vanthome

This comment has been minimized.

Copy link
Contributor

commented Sep 6, 2013

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

@elsurudo

This comment has been minimized.

Copy link

commented Feb 3, 2014

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...

@elsurudo

This comment has been minimized.

Copy link

commented Feb 3, 2014

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

@samselikoff

This comment has been minimized.

Copy link
Contributor

commented Apr 16, 2014

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

@stefanpenner

This comment has been minimized.

Copy link
Member

commented Apr 16, 2014

@samselikoff correct

@MaxGabriel

This comment has been minimized.

Copy link

commented Jun 13, 2014

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;
}
@manoharank

This comment has been minimized.

Copy link

commented Jun 20, 2014

@tyleriguchi tyleriguchi referenced this issue Aug 11, 2014

Closed

ember fix #281

@trek

This comment has been minimized.

Copy link
Member

commented Oct 13, 2014

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

@ghost

This comment has been minimized.

Copy link

commented Feb 27, 2015

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

@trek

This comment has been minimized.

Copy link
Member

commented Mar 1, 2015

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

@ghost

This comment has been minimized.

Copy link

commented Mar 1, 2015

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.

@stefanpenner

This comment has been minimized.

Copy link
Member

commented Mar 2, 2015

can you provide an example?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.