групповые кнопки внутри popup bootstrap

Question

У меня есть popup bootstrap, внутри которого есть div с стилем «btn-group», который должен открыть меню действий (aria-haspopup="true").

Проблема заключается в том, что меню действий открывается за пределами границ popover, и когда я изменяю свойство position/display, оно входит в popover, но перемещает весь текст.

Это файл HBS всей пирог:

<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"> 
 
\t <li><a href="#">Action</a></li> 
 
\t <li><a href="#">Another action</a></li> 
 
\t <li><a href="#">Something else here</a></li> 
 
\t <li role="separator" class="divider"></li> 
 
\t <li><a href="#">Separated link</a></li> 
 
\t </ul> 
 
</div> 
 
</h3> 
 

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

и это, как действия всплывающих окон открывается:

Это, как я открыть поповер:

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

Как открыть всплывающее окно действий под стрелкой?

Обновление: Я попытался положение: абсолютное - не работает, и я также пробовал следующую комбинацию: позиция: относительная; display: inline; , и результат был (как вы можете видеть, поля внутри большого попопера отходят в сторону ...): Спасибо.

Update 5.1:

текущего положение:

Answer 1

Использование position: absolute поместить выпадающее меню над всплывающим окном.

<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; 
}