Adjust button position

Ask the Community Customization
1

Tried that, but I have 2 buttons, and it affects both of them on mobile… Even though I’ve only changed the CSS for one of them. How do I only move (or hide) that one, without affecting the other button?

Can I do it by ID instead of class?

2 Likes
2

Could you please send me a link to the page, where your widgets are installed?

1 Like
3

The site isn’t live/public yet.

1 Like
4

Okay, I’ll discuss it with the devs and will update you tomorrow :slightly_smiling_face:

5

Hi @user20104!

Please add this code to the Custom JS field on the Design tab of your widget’s settings:

const targetLabelText = "POISONING";
const offsetTopValue = "100px";

const waitForElement = (selector, root = document, maxAttempts = 500) =>
  new Promise(resolve => {
    let attempts = 0;
    const check = () => {
      const element = root.querySelector(selector);
      if (element) {
        resolve(element);
      } else if (attempts < maxAttempts) {
        attempts++;
        setTimeout(check, 100);
      }
    };
    check();
  });

let targetContainer = null;

waitForElement("[class*='ButtonInner__ButtonLabel-sc']").then(label => {
  if (label.textContent.trim() === targetLabelText) {
    targetContainer = label.closest("[class*='FloatingButton__FloatingButtonContainer-sc']");
  }
});

const modifyButton = () => {
  if (targetContainer) {
    targetContainer.style.top = offsetTopValue;
    const innerButton = targetContainer.querySelector("[class*='ButtonBase__ButtonContainer-sc']");
    if (innerButton) innerButton.style.borderRadius = "30px";
  }
};

const resetButton = () => {
  if (targetContainer) {
    targetContainer.style.top = "";
    const innerButton = targetContainer.querySelector("[class*='ButtonBase__ButtonContainer-sc']");
    if (innerButton) innerButton.style.borderRadius = "";
  }
};

const runModification = () => {
  if (window.innerWidth <= 480) {
    modifyButton();
  } else {
    resetButton();
  }
};

runModification();
const resizeObserver = new ResizeObserver(() => runModification());
resizeObserver.observe(document.documentElement);

In the 2nd line of the code you can set the needed offset value :slightly_smiling_face:

1 Like
6

Is it possible to set the offset from the bottom left, instead of from the top? Every mobile device has different dimensions, so setting the offset from the top won’t work for us. (Thanks for the code though–it might come in handy for other situations!)

1 Like
7

Do I understand right that you’d like to keep this button in the top right on desktop, but on mobile it should be in the bottom left with the needed offset?

8

Hi Max,
Yes, that’s right. (Or, at least, we’d like to try that to see if it helps…)

1 Like
9

Here is the new code:

const TARGET_LABEL = "POISONING";
const OFFSET_BOTTOM = "100px";
const OFFSET_LEFT = "0px";

const waitForElement = (selector, root = document, maxAttempts = 500) =>
  new Promise(resolve => {
    let attempts = 0;
    const check = () => {
      const element = root.querySelector(selector);
      if (element) {
        resolve(element);
      } else if (attempts < maxAttempts) {
        attempts++;
        setTimeout(check, 100);
      }
    };
    check();
  });

let targetContainer = null;

waitForElement("[class*='ButtonInner__ButtonLabel-sc']").then(label => {
  if (label.textContent.trim() === TARGET_LABEL) {
    targetContainer = label.closest("[class*='FloatingButton__FloatingButtonContainer-sc']");
  }
});

const modifyButton = () => {
  if (targetContainer) {
    targetContainer.style.inset = `auto auto ${OFFSET_BOTTOM} ${OFFSET_LEFT}`;
    const innerButton = targetContainer.querySelector("[class*='ButtonBase__ButtonContainer-sc']");
    if (innerButton) {
      innerButton.style.borderRadius = "30px";
    }
  }
};

const resetButton = () => {
  if (targetContainer) {
    targetContainer.style.removeProperty("inset");
    const innerButton = targetContainer.querySelector("[class*='ButtonBase__ButtonContainer-sc']");
    if (innerButton) {
      innerButton.style.borderRadius = "";
    }
  }
};

const runModification = () => {
  if (window.innerWidth <= 480) {
    modifyButton();
  } else {
    resetButton();
  }
};

runModification();
const resizeObserver = new ResizeObserver(() => runModification());
resizeObserver.observe(document.documentElement);

Try it out and let me know how it worked :slightly_smiling_face:

1 Like
10

Hmm. Although setting the offset to 0px seems to move it to the right spot, every time I refresh it goes back to the original spot in the upper left, and I have to refresh a few more times before it goes to the bottom. (And then the next time I refresh, it goes back to the top again.)

We’ll probably stick with just hiding it entirely for mobile (as we were doing before), or maybe we’ll put it within the navigation drawer for mobile-only.

Thanks for the code though!

1 Like
11

Oh, I am really sorry about that!

It’s hard to guess what causes the issue, but if you could share the link to the page with the widget (once it’s published), we’d be happy to look into this :slightly_smiling_face: