2

I am rendering a Bootstrap 3 btn-group-vertical using EmberJS and the Emblem templating language (which supports Handlebars helpers). The following two ways of rendering the same btn-group-vertical produce different results (see image below). One has square corners and the other has rounded corners. Using the element inspector reveals that Ember is inserting script tags when each is used. The label elements are identical though. Why does this cause a difference in the corners?

Without {{each}}

h4 Direction
.btn-group-vertical data-toggle="buttons"
  label.btn.btn-primary
    input type="checkbox" left
  label.btn.btn-primary
    input type="checkbox" right

enter image description here

With {{each}}

h4 Direction
.btn-group-vertical data-toggle="buttons"
  each dir in directions
    label.btn.btn-primary
      input type="checkbox"
        = dir.name

... directions is defined like this in the controller

directions: [
  Ember.Object.create({name: 'left', visible: true}),
  Ember.Object.create({name: 'right', visible: false}),
],

enter image description here

enter image description here

Sean Mackesey
  • 10,701
  • 11
  • 40
  • 66
  • Check the output HTML, how does it differ? That will provide clues. – Julian H. Lam Dec 11 '13 at 14:36
  • @JulianH.Lam Thanks Julian. See my edited post for the output HTML. It IS different, but I have no idea how the script "placeholders" that Ember is inserting alter the corner style of the buttons. – Sean Mackesey Dec 15 '13 at 18:57

1 Answers1

0

I just ran into this issue as well. The script tags inserted by Handlebars (and supposedly also Emblem) interfere with the CSS styling rules that Bootstrap uses to recognize contiguous elements.

The first and last children of a button group are styled with top or bottom round borders respectively. But the inserted script tags take the first and last positions.

The upcoming HTMLBars should solve this.

macu
  • 379
  • 1
  • 4
  • 10