HTML widget not working properly

Classic General
1

I run two simple B&B booking websites, linking to a third party reservation system called FreeToBook (FTB)

FTB recently introduced a new responsive booking widget which I added to the sites, using the standard HTML box and copy/pasting the div text as instructed.

The widget ought to display a drop down calendar but the HTML is clearly inhibiting this action, so the widget is not functioning as intended. A friend, whose site is built using Weebly, had the same problem which was solved by using a different widget in an i-frame.

I’ve been in touch with FTB who told me that I need to edit the HTML code controlling the box’s behaviour: “The box with the booking widget needs to have “overflow-y:hidden;” removed.”

Is there a solution to this problem which a basic to intermediate RW user can press into use?

These are the websites in question:

www.aleberry.co.uk
www.lewescornerhouse.co.uk

2

Add this to the page’s CSS area.

#stacks_out_195_page0, #stacks_in_195_page0, #stacks_out_0_page0 {
    overflow: visible;
}

Btw, it needed both overflow-x and overflow-y changed (hence just using “overflow” above). Just changing “overflow-y” didn’t clear the issue.

1 Like
3

What Don (@DLH) shows will work on that one page. You will have to change this per page. Looks like you have the Widget on two of the pages.

4

Very good point. That code should work on the home page of this site: https://aleberry.co.uk

If you need help with the other site or other pages, let us know.

5

I have it on about three pages and would like to use it across most of the relevant pages, but not in this state!

I’ve pasted that code into the CMS for this page, but it’s still not working (unless I’m being exceptionally thick).

6

Oh, but it is working on the home page of Aleberry, but not the Rooms and Prices page.

Okay, I give up for tonight. Any insight from you resident geniuses will be very welcome!

7

The CSS code Don gave you above will only work for the one page. It should be pasted into the CSS page inspector.

Because the overrides (CSS) are happening at the ID level (#) and are being applied to the stack ID, it’s unique to each page.

Try this for the "room and Rate page:

#stacks_out_204_page1, #stacks_in_204_page1 {
       overflow: visible;
}
2 Likes
8

For this page:
https://www.lewescornerhouse.co.uk/page12/index.html

Try:

#stacks_in_100_page12,  stacks_out_100_page12 {
   overflow: visible;
}
1 Like
9

This has fixed www.aleberry.co.uk but not my own https://www.lewescornerhouse.co.uk/page12/index.html or indeed the linked east and west bedroom pages. Could this be because of the individual theme? Why is one working and not the other?

I clearly need to go back to the widget provider and ask for assistance, but beyond what I’ve already said (basically "wail: your widget has broken my website) it would be really helpful to explain what the problem is.

10

The problem you’re having is that the code that’s fixing the problem is using something called CSS ID’s more exactly the stacks ID to apply the changes to the overflow attribute.

Stack IDs will look like this #stacks_in_100_page12. Starting with the #stacks_in or #stacks_out.

Stack IDs are unique to every instance of the stack being used. These IDs are generated by stacks for internal use of the individual stack and change if you copy or use them in a partial or external with each instance. That’s why I rarely use them for CSS overrides. Sorry I should have corrected this and given you a more “universal” approach instead of adding to a poor technique.

Unfortunately I’m away from my Mac for the next couple of days so I can only make an untested untried suggestion. Perhaps someone else with a web tools handy can help out.

If you’re using stacks 4, on the HTML stack you are pasting the widget into there should be a place to add a class name, if my memory is correct it’s under the area called HTML. Find that attribute and add the class name

myOverflow

Then try adding this CSS:

.myOverflow,  .myOverflow * {
   overflow: visible; 
}

If you’re not using stacks 4 you will need to use something like Joe Workmen’s CSS Box stack to apply the class name.

Once you’ve got this approach working then it should work anyplace you use it without changing it. This from my iPad and memory so it might not work the first try.

1 Like
11

Aha! Ping! (that’s the sound of a lightbulb illuminating where the problem might lie)

I’m still using Stacks 3. I shall try upgrading.

12

Stacks 4 is great and I do recommend upgrading, but you don’t have to upgrade to make the CSS fix more generic. As I mentioned earlier you could place the HTML stack inside Joe Workman’s free CSS box stack and apply the class to it.

If you do upgrade to stacks 4 the CSS class attribute is now on most stacks. In addition once you have the HTML widget working you can make it an external (new stacks 4 feature) and share it between projects.

13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.