group-buttons inside a popover of bootstrap - html

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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</h3>
.dropdown-menu {
position: absolute:
top: 20px; // height of the top my-new-title container
}
.btn-group {
position: relative;
}