Как сохранить значок переключения справа при использовании кнопок на панели, PrimeNg

Question

StackBlitz

Я использую переключаемую панель с PrimeNg, и я хочу разместить кнопку, выровненную по правому краю, но слева от значка переключения. Пока что в моем html есть следующее:

<p-panel
  header="Testing Toggle"
  [style]="{ width: '100%' }"
  [collapsed]="collapsed"
  [toggleable]="true">
<p-header>
  <button
    pButton
    label="Clear"
    icon="pi pi-refresh"
    class="ui-button-warning"
    style="float: right; margin-right: 5px;">
  </button>
</p-header>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Itaque nisi iste praesentium, voluptatibus nam facere omnis
  deleniti natus pariatur sed officiis minus illum harum ad beatae alias. 
  Consequuntur, debitis atque.
</p-panel>

Как и ожидалось, используя float: right на кнопке, кнопка перемещается полностью вправо в заголовке, заставляя переключаться значок слева:

введите описание изображения здесь

Есть ли способ использовать эту кнопку или класс ui-panel-titlebar-toggler, чтобы значок переключения оставался крайним правым, а кнопки располагались слева от него?

I также пробовали использовать .ui-panel-titlebar-toggler со свойством float: right, надеясь, что он будет полностью sh, но это ничего не изменило.

Answer 1

Stackblitz: https://stackblitz.com/edit/angular6-primeng-hxpmbm

Вы должны указать margin-right в процентах, чтобы сделать это для всех разрешений. Какой бы элемент ни понадобился справа, даст отрицательное значение margin-right.

.ui-panel .ui-panel-titlebar-icon{
    width: 6%!important;
    margin-right: -26%!important;
    margin-top: 6px!important;
}

, это вам нужно добавить в styles.css

и

<button
    pButton
    label="Clear"
    icon="pi pi-refresh"
    class="ui-button-warning"
    style="float: right;margin-right: 7%;width:16%"
  >
  </button>