I would like to hide the vertical scrollbar that appears on my gift cards ordering page (https://www.thaitranquility.com/massage-gift-cards). I have designed the site in Wix Studio. It is third party embedded code that is placed in an iFrame. The iFrame is in a container. There are options for selecting the type of gift card that are displayed in an “accordion” dropdown menu. I have the “Show scrollbar” toggled off on the container but it continues to show. Any help would be greatly appreciated.
Hi, SteveM !! if you paste the iFrame code here, someone in this community might be able to help you resolve the issue. (If there is any sensitive information in the iFrame code, please replace it with appropriate placeholder text like “sample” before posting.)
Hi onemoretime,
thank you for suggesting that I paste the iFrame code. Here is the code:
I pasted the code but it did not display. Not sure if there is a specific way to have it show with just copy and paste. So, I took a screenshot of the code and uploaded that. I hope this is suitable.
Hi, SteveM !!
For now, please try the following code. If it doesn’t work, try the code below.
（※ Don’t forget to replace data-site-id with the original value）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.gift-up-target {
overflow: hidden;
}
</style>
</head>
<body>
<div class="gift-up-target" data-site-id="sample" data-platform="Wix"></div>
<script type="text/javascript">
(function (g, i, f, t, u, p, s) {
g[u] = g[u] || function() { (g[u].q = g[u].q || []).push(arguments) };
p = i.createElement(f);
p.async = 1; p.src = t;
s = i.getElementsByTagName(f)[0]; s.parentNode.insertBefore(p, s);
})(window, document, "script", "https://cdn.giftup.app/dist/gift-up.js", "giftup");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
overflow: hidden;
}
</style>
</head>
<body>
<div class="gift-up-target" data-site-id="sample" data-platform="Wix"></div>
<script type="text/javascript">
(function (g, i, f, t, u, p, s) {
g[u] = g[u] || function() { (g[u].q = g[u].q || []).push(arguments) };
p = i.createElement(f);
p.async = 1; p.src = t;
s = i.getElementsByTagName(f)[0]; s.parentNode.insertBefore(p, s);
})(window, document, "script", "https://cdn.giftup.app/dist/gift-up.js", "giftup");
</script>
</body>
</html>
Hi onemoretime,
Thank you for taking time to attempt a solution. Unfortunately the code did not resolve the problem. The first snippet of code resulted in the scrollbar appearing in the iFrame window again.
The second eliminated the scrollbar but then cutoff the menu from displaying within the iFrame window (see screenshot). Screenshot 2024-08-05 at 1.17.13 PM|269x500
If you have any other suggestions I would be grateful for your response. Thanks again.
Hi, SteveM
Do you mean that the menu is being cut off at the bottom? Using overflow: hidden means cutting off content that exceeds the size of the iframe element. So, if the scrollbars are hidden, wouldn’t increasing the height of the iframe element itself solve the issue?
By the way, what web browser are you using to test this issue? In my opinion, scroll issues can sometimes be browser-dependent.
Hi onemoretime,
Thank you once again. I generally use Safari. But it is doing the same in Chrome and Firefox. On my old website (that I created with Webflow) it worked perfectly. When the arrow was clicked on the gift card menu options, the menu expanded to reveal the choices and the footer moved down along with it. When the arrow was clicked to close the dropdown, the footer moved back up with it.
At one point (as I have been trying to solve this) I had the iFrame set to a 3000 px height. This will allow the menu dropdown to display but the aesthetics are bad. It results in having a huge empty space between the bottom of the menu and the footer. I really would like the footer to respond to the opening and closing of the menu.
I understand. In such cases, I believe it would be better to use Custom Elements rather than iframes (HTML Components). Custom Elements can be directly embedded into the Wix site, allowing the footer to be adjusted up and down according to the size changes of the Custom Element.
Wow! That got me dizzy 
! So, I tried using Custom Elements as you suggested but it just brings me into a realm that is beyond my understanding. I really don’t know coding. Any other direction? Hire a developer through Wix? Thanks for your help.