Databases
StackOverflow2013
Postsdbo
POMetamorphs Messing Up CSS in Ember.js Views
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMetamorphs Messing Up CSS in Ember.js Views
    text
    copied!<p>I'm using Ember.js / handlebars to loop through a collection and spit out some items that I'd like bootstrap to handle nice and responsive like. Here is the issue:</p> <p>The bootstrap-responsive css has some declrations in it like:</p> <pre><code>.row-fluid &gt; [class*="span"]:first-child { margin-left: 0; } </code></pre> <p>and</p> <pre><code>.row-fluid:before, .row-fluid:after { display: table; content: ""; } </code></pre> <p>These rules seem to target the first children. When I loop through my collection in handlebars I end up with a bunch of metamorph code around my items:</p> <pre><code>&lt;div class="row-fluid"&gt; {{#each restaurantList}} {{view GS.vHomePageRestList content=this class="span6"}} {{/each}} &lt;/div&gt; </code></pre> <p>Here is what is produced:</p> <pre><code>&lt;div class="row-fluid"&gt; &lt;script id="metamorph-9-start" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;script id="metamorph-104-start" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;div id="ember2527" class="ember-view span6"&gt; My View &lt;/div&gt; &lt;script id="metamorph-104-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;script id="metamorph-105-start" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;div id="ember2574" class="ember-view span6"&gt; My View 2 &lt;/div&gt; &lt;script id="metamorph-105-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;script id="metamorph-9-end" type="text/x-placeholder"&gt;&lt;/script&gt; &lt;/div&gt; </code></pre> <p>So my question is this: 1. How can I tell css to ignore script tags? or 2. How can I edit the css bindings so that they skip over script tags when selecting the first or first child? or 3. How can I structure this so that Ember uses fewer/no metamorph tags?</p> <p>Here is a fiddle: <a href="http://jsfiddle.net/skilesare/SgwsJ/" rel="noreferrer">http://jsfiddle.net/skilesare/SgwsJ/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload