Question

I’m using bootstrap for my Emberjs App… I loop through an array to draw my checkboxes… But my script tags affects the spacing between the inline checkboxes…

 <div class="row-fluid">
     <script id="metamorph-933-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4029" class="ember-view ember-checkbox" type="checkbox">        
        Firstchance 
      </label>      
   <script id="metamorph-933-end" type="text/x-placeholder"></script><script id="metamorph-934-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4030" class="ember-view ember-checkbox" type="checkbox">        
        secondchance        
      </label>      
   <script id="metamorph-934-end" type="text/x-placeholder"></script><script id="metamorph-935-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4031" class="ember-view ember-checkbox" type="checkbox">        
        thirdchance     
      </label>      
   <script id="metamorph-935-end" type="text/x-placeholder"></script><script id="metamorph-936-start" type="text/x-placeholder"></script>       
        <label class="checkbox inline">     
        <input id="ember4032" class="ember-view ember-checkbox" type="checkbox">        
        finalchance     
      </label>      
   <script id="metamorph-936-end" type="text/x-placeholder"></script><script id="metamorph-937-end" type="text/x-placeholder"></script>


  </div>

Here is the fiddle where the spacing is not proper,

http://jsfiddle.net/4XZMb/1249/

and here is the proper spaced fiddle without any script tags

http://jsfiddle.net/4XZMb/1248/

My question is that How are the script tags affects my style …???

And How can i get the proper spacing here without adding any extra styles…??

Answer 1

The “proper spaced” version has <label class="checkbox inline"> tags following other <label class="checkbox inline"> tags. These tags are styled by the following CSS from bootstrap:

.checkbox.inline + .checkbox.inline {
margin-left: 10px;
}

The version with the script tags has script tags being inserted around the label tags. This prevents the label tags from matching the selector above, and they lose the left margin. An easy workaround would be to add your own class to your own CSS, e.g.

.fluid-row-checkbox {
margin-left: 10px;
}

and then add this class to your second, third and fourth labels:

<label class="checkbox inline fluid-row-checkbox">

There are other, probably better ways to address this, but this is the easiest.