Capture preview customization

🧑‍💻 Technical Support
1

Hi Team,
Can we remove the action button (share button ) from the capture preview?
Thanks

2

You can set create a .css file and add:

#actionButton {
  display: none !important;
}

More information here:

3

thankyou for the reply Ian but i wanted to understand the level of customization we can do share button, because i am not able to customize it much like position and all with respect to my other UI elements

4

Using the above code I’ve shared you can certainly customize the button to your liking.

This just hides it but if you use simple CSS you can edit the button just make sure to add !important at the end of the change

5

the thing is i am able to change basic css like color, size etc but i am not able to change the position, because when i change the position in android it changes for IOS and same css doesn’t work for android, must be bacause in android it comes with download button and it takes the css from .show with download button class

1 Like
6

I’m in the same situation as you. I’m wondering if you’ve found a solution or if a solution exists to edit the button position for both Android and iOS at the same time.

7

Hi @Elyes_Chater
you can edit the position but it’s not very perfect. you have to inspect and do it, use chrome://inspect/devices to inspect and see the position but it’s very time taking and frustrating but still you will not get the idententical position for both devices.
better use share button as that will save the photo in gallery and will have identical position for both devices.
Let me know if this works.
Thanks

1 Like
8

hi @Neha_Tiwari
Thanks for getting back to me so quickly, but I went in a different direction, I found a solution that is not ideal, but it works as a workaround for the problem. In the JavaScript, I detect the type of device using the userAgent:

init() {
  const userAgent = navigator.userAgent;

  if (/android/i.test(userAgent)) {
    document.body.classList.add('Android');
  }

  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    document.body.classList.add('iOS');
  }
}

Then, in the index.css file, I apply a specific style for each device, and it works:

#actionButton {
  background-color: #18b35e !important;
}

.Android #actionButton {
  transform: translateX(-90%) translateY(-100%) !important;
}

.iOS #actionButton {
  transform: translateY(-50%) !important;
}
1 Like