Issues with using the Ticketmaster Event Discovery Widget on a Squarespace 7.0 page

Hello, I am having an issue integrating this widget from ticketmaster: https://developer.ticketmaster.com/products-and-docs/widgets/event-discovery/

The main issues I'm experiencing when trying to implement this on the site is 1: formatting, with some of the themes, namely the Grid theme, the widget appears not wide enough, maybe like 200-300px where somewhere in the ballpark of 600px is what is desired. I've attached a screenshot to demonstrate this (Capture1).  The way I have this with 2 code blocks: the first one is on top containing the HTML and the second is the javascript linking to the widget itself. 

The second issue I'm having is that the scrolling functionality is lost when displaying the widget on my site.  The widget is supposed to allow for scrolling through all of the events that are returned from the query in the HTML.  This is also true of the "next" and "back" buttons that are present on other themes such as the Poster and Color Block themes. 

I have done this on a Squarespace 7.1 website with little to zero issues so I suspect it has something to do with the 7.0 editor.  Alternatively I've wondered if it has something to do with some global margin/padding settings but I'm not sure where to look for that. 

Any and all help is appreciated, I'm happy to provide any more information that is needed as well.

Thank you!

Hi,

Can you share link to page where you added widget? We can take a look

On 11/6/2022 at 2:28 AM, tuanphan said:

Hi,

Can you share link to page where you added widget? We can take a look

Thank you! Here is the page:

https://almamatertacoma.squarespace.com/test

It is not listed so I don't know if that will be a problem for you to view.

The widget on top at least formats more or less correctly, however there should be carousel buttons on the sides to allow switching between events.

The one on bottom is the grid view and pretty much always rendered "squished" like you can see on the page.

Here is the website where you can configure the widget:

https://developer.ticketmaster.com/products-and-docs/widgets/event-discovery/

Add to Design > Custom CSS

div[w-theme="newschool"] {
    width: 100% !important;
}
div[w-theme="newschool"][w-colorscheme="light"] .events-root-container {
    width: 100% !important;
}

On 11/10/2022 at 1:51 AM, tuanphan said:

div[w-theme="newschool"] {
    width: 100% !important;
}
div[w-theme="newschool"][w-colorscheme="light"] .events-root-container {
    width: 100% !important;
}

Thank you, I believe that helped a little bit with certain widget layouts, but not others, specifically the Grid layout.

Also there is still the issue of the scroll bar not appearing on the widget. 

Here is the page again:

https://almamatertacoma.squarespace.com/test

The listview is the first widget on the screen and the Grid is the second.

On 11/12/2022 at 5:01 AM, cshimm said:

Thank you, I believe that helped a little bit with certain widget layouts, but not others, specifically the Grid layout.

Also there is still the issue of the scroll bar not appearing on the widget. 

Here is the page again:

https://almamatertacoma.squarespace.com/test

The listview is the first widget on the screen and the Grid is the second.

It looks like you solved? I see scroll bar appears here