0

I need a button in the header section of a UI Boostrap Accordion group item. I was able to added the markup and it works, but the button is not in the middle (vertical) as soon as I add the class pull-right. Click here to view the Plunker. Without the class, the button is correctly positioned and aligned.

Web User
  • 7,438
  • 14
  • 64
  • 92

1 Answers1

1

Wrap a span around the text and button inside the uib-accordion-heading. Style the span with display:inline-flex; width: 100%; justify-content: space-between; align-items: baseline;.

<uib-accordion-heading>
  <span style="display:inline-flex; width: 100%; justify-content: space-between; align-items: baseline;">
    I can have markup, too! <button class="btn btn-primary btn-sm">OPEN</button>
  </span>
</uib-accordion-heading>

Updated plunker

HaveSpacesuit
  • 3,572
  • 6
  • 40
  • 59
  • That works, thanks! Is there a more concise way to do this? I guess I could create and reuse a class. – Web User May 12 '17 at 21:49
  • I'm sure there is a better way to do it. I just always go to the flex-box when I need a quick hack to get something to work. It only works how you want it because there are two items. If you added another item, `space-between` would put them spaced evenly across the row. But for just two items, it works great. – HaveSpacesuit May 13 '17 at 18:19
  • I am seeing alignment issues with the solution in Safari. For some reason, the buttons shift, in a non-uniform manner, towards the center of the [header] panel. Chrome and Firefox work just fine. Any idea why that may be? – Web User May 15 '17 at 18:59
  • I'll look into it. I don't have a mac, so I can only approximate the problem with an old version of Safari 5 for Windows. You might get a head start by looking at the resources in [this answer](http://stackoverflow.com/a/35137869/2908576) – HaveSpacesuit May 15 '17 at 21:26