Horizontal Button Stack - Hide with certain popups?

[HyperCriSiS]

Goal

Hi,
I would like the horizontal button stack to hide when certain popups open because they do not fit well when the popup show much.
Is this possible?

Thanks
Hyper

Source Yaml

-

Which step did you already try?

I have searched but found nothing to do this.

Problem

No response

Read the documentation

• I have read the documentation

[Menelao147]

If you want to hide it, use the following code:
The first section handles repositioning the button so it covers the empty space.
The second section contains the code to actually hide the button.

${(() => {
  const updateButtonPositions = () => {
    const buttons = Array.from(card.querySelectorAll('.bubble-button'));
    let offset = 0;
    buttons.forEach((btn) => {
      if (window.getComputedStyle(btn).display === 'none') {
        return;
      }
      btn.style.setProperty('transform', `translateX(${offset * 68}px)`, 'important');
      offset++;
    });
  };
  requestAnimationFrame(updateButtonPositions);
  return "";
})()}

.bubble-button-1{
  display: ${hass.states['input_boolean.test_popup'].state === 'on' ? 'flex' : 'none'} !important;
}

.bubble-button-2{
  display: ${hass.states['input_boolean.test_popup'].state === 'off' ? 'flex' : 'none'} !important;
}

---

_{If this solves your problem, mark this as solved and close the discussion.}