group-buttons inside a popover of bootstrap

Question

I have a popover of bootstrap, which inside there is a div with "btn-group" style which supposed to open an actions menu (aria-haspopup="true").

The problem is that the actions menu opens outside the popover borders, and when i'm changing the position/display property it goes inside the popover but moves all the text.

This is the HBS file of the whole popover:

<h3 class="popover-title" style="font-weight: bold;">{{title}}
<div style="float: right; text-align:center;"  class="btn-group">
   <button id="{{id}}-actions-button" type="button" class="btn btn-action js-primary-row-action" data-index="-1">{{primaryAction.text}}</button>
   <button type="button" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
	  <li><a href="#">Action</a></li>
	  <li><a href="#">Another action</a></li>
	  <li><a href="#">Something else here</a></li>
	  <li role="separator" class="divider"></li>
	  <li><a href="#">Separated link</a></li>
	</ul>
</div>
</h3>

<div class="row">
    <div style="padding-top:15px;">
    	{{#each rows}}
			<div style="padding-bottom: 20px;">
						<div style="float: left; width: 50%;"><label class="label-preview">{{cell1.label}} </label><div>{{cell1.value}}</div></div>
	                    <div style="float: right; width: 50%; text-align:left;"><label class="label-preview">{{cell2.label}} </label><div>{{cell2.value}}</div></div>
                    
  				<div style="height: 40px;"></div>
			</div>
        {{/each}}
    </div>
</div>

and this is how the actions popup opens:

This is how i open the popover:

this.popupElement.popover({
                    template: html,
                    placement: 'right',
                    viewport: viewport
                });

How can I open the actions popup just below the arrow?

Update: I tried position:absolute - not working and i also tried the next combination: position: relative; display: inline; and the result was (as you can see the fields inside the big popover are moving aside...): Thanks.

Update 5.1:

current position:

Answer 1

Use position: absolute to place the dropdown over your popup.

<h3 class="popover-title" style="font-weight: bold;">{{title}}
    <div style="float: right; text-align:center;"  class="btn-group">
       <button id="{{id}}-actions-button" type="button" class="btn btn-action js-primary-row-action" data-index="-1">{{primaryAction.text}}</button>
       <button type="button" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    </h3>


.dropdown-menu {
  position: absolute:
  top: 20px; // height of the top my-new-title container
}

.btn-group {
  position: relative;
}