0

Why does the angular-ui accordion in the below example seem to not like the span elements? I originally had these elements in a type of table (so I know they work) but decided to move them into an accordion since that is the functionality I am looking for.

I want the title in the accordion header pulled to the left and the checkmark button to in the header pulled to the right.

<accordion close-others="false">
<accordion-group data-ng-repeat="group in groups">
  <accordion-heading>
    <span class="pull-left">
      {{ group.title }}
    </span>
    <span class="pull-right">
      <button class="btn btn-success">&#10003;</button>
    </span>
  </accordion-heading>
  {{ group.content }}
</accordion-group>

http://plnkr.co/edit/rkbZ6h4tUnCOQ0swsngg

Am I going to be able to use the accordion for the button in the first place or will the clicking of the header always interfere with clicking the button?

Nick Bonnet
  • 1
  • 1
  • my previous comment was slightly inaccurate. The more accurate statement is that `pull-left` and `pull-right` css classes are not compatible with accordion-group, because they override the css that is being used to control the elements in the accordion dynamically. This would happen in any accordion group, it's not related to angular. – Claies Jul 10 '15 at 22:44
  • Searching for my issue in google I can see other people using pull-left/pull-right in the headers of accordions. So I think it is possible ... but I am obviously doing something wrong. – Nick Bonnet Jul 10 '15 at 22:51

1 Answers1

0

Answer based on How do you keep parents of floated elements from collapsing?

HTML

     <div class="clearfix">
      <span class="pull-left">
        {{ group.title }}
        </span>
      <button class="pull-right btn btn-success">&#10003;</button>
    </div>
  </accordion-heading>

CSS

Note bootstrap already provides this class for you, so you don't need to create it yourself.

.clearfix:after {
      content: " ";
      display: block;
      height: 0;
      clear: both;

http://plnkr.co/edit/Y0sEXOSSjp3lee1ey9tm?p=info

Community
  • 1
  • 1
edqwerty
  • 210
  • 2
  • 10