f1npbg
Last Updated: February 25, 2016
·
1.902K
· flynfish
643de40e3b6fcb4a8f4f83e21fd458d3

Bootstrap button group with Ember

If you try the following in an ember template, the button elements get wrapped in the ember metamorph tags which break the bootstrap styling because they use the :first-child css selectors.

<div class="btn-group" data-toggle="buttons-radio">    
   {{#each db in databases}}
      <button class="btn">{{db.name}}</button>
   {{/each}}
</div>

Messed up styling:

Picture

You have two options to fix this:

  1. Update your css to fix it
  2. Use an Ember view so metamorph tags are gone

I don't like the first option because it introduces what amounts to duplicate css rules. The 2nd option is below:

App.MyView = Ember.CollectionView.extend({
  classNames: ['btn-group'],
  itemViewClass: Ember.View.extend({
    template: Ember.Handlebars.compile("{{view.content.name}}"),
    tagName: 'button',
    classNames: ['btn']
  }),
  attributeBindings: ['data-toggle'],
  'data-toggle': 'buttons-radio'

});

In my case I also needed to make sure I bound the collection to the view:

{{view App.MyView contentBinding="databases" }}

Correct Styling:

Picture

Say Thanks
Respond

3 Responses
Add your response

7007
94bea9dfe7bb73ce7831a6967767f612

thanks @flynfish. I will try it...

over 1 year ago ·
17821
Default profile 5 normal

I've been struggling with the same issue with UIKit (nice alternative to Bootstrap btw)'s button groups. They work exactly the same way, and get messed up the same way.
I had figured out the same solution, except that I was directly instantiating the CollectionView with .create() (as shown in http://emberjs.com/api/classes/Ember.CollectionView.html).
Though this (sometimes) works, it didn't this time, and replacing .create() with .extend() fixed it. Thanks!

over 1 year ago ·
17822
643de40e3b6fcb4a8f4f83e21fd458d3

Awesome, glad it helped out!

over 1 year ago ·