Issue with Accordion Panel Content Scroll Bar

Hello there,

I've encountered a puzzling problem with my website. My objective is to insert a Time.ly Calendar widget into one panel of my accordion. On this page, "TOURNAMENTS: , the widget appears exactly as desired. However, when I replicate the code on this page, , the scroll feature is not functioning as expected. Another page, , only displays a portion of the calendar. The only difference appears to be the calendar script, specifically the organizer numbers. This is quite perplexing to me, and I am hoping that some experts may have a straightforward solution. I have attempted adjusting the height of the panel and accordion, but to no avail. Thank you in advance for any assistance you may be able to provide.

CSS

.ac-container {
    max-width: 810px;
}

.ac-container label {
    // CSS properties...
}

// More CSS properties...

HTML

<section class="ac-container">
    // HTML code...
</section>

The three different script codes that I've used are as follows:

<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script>

<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=26034&organizers=46341" data-max-height="0" id="timely_script" class="timely-script"></script>

<script src="//dashboard.time.ly/js/embed.js" data-src="https://events.time.ly/hye2ww2?categories=21029&organizers=43496" data-max-height="0" id="timely_script" class="timely-script"></script>
javascripthtmlcssscrollaccordion

Answer №1

It is required that the 'overflow: scroll' property be added to this particular div.

Additionally, the article should have a class of "ac-small".

Here's an example of how to implement it: article.ac-small {overflow: scroll;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring the checkbox is disabled prior to editing

Check out my table below: https://i.stack.imgur.com/7byIa.png Whenever I click the edit button, I can modify the status field and action field. This feature works correctly. However, the issue is that I am able to change the values of status and action e ...

javascriptjqueryhtmlnode.js

The Loopback access control list (ACL) for the admin role is failing to be

Seeking assistance with troubleshooting why my 'admin' role is not functioning in loopback 3.x. Here are the codes I am using: script.js - Contains code for creating admin roles in a postgres database. module.exports = function (app) { var User ...

javascriptnode.jspostgresqlauthenticationloopback

Tips for preventing timeouts when posting data to Heroku servers

I have a Ruby on Rails application deployed on Heroku. The app includes 8 optional text fields that users can choose to fill or leave empty as needed. However, the more text fields a user fills out, the heavier the processing load on my app. If there are ...

javascriptruby-on-railsrubyajaxheroku

Explore how Vue 2.1 allows for the dynamic updating of dropdown options based on selections made in another dropdown

Currently, I have a Vue v.2 form set up with an address section that includes a State dropdown. My goal is to make the State dropdown automatically populate based on the city selected. For example, if a user chooses 'Atlanta' as the city, 'G ...

javascriptjqueryvue.js

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...

javascripthtmlcss

Despite returning an "OK" status, the jQuery Ajax Codebehind Post fails to function properly

Attempting to call a function in ASP.NET with jQuery Ajax: var params = "{'name':" + "\"" + name + "\"}"; $.ajax({ type: "POST", url: "CreateTopic.aspx/CreateNewTopic", data: params, ...

javascriptjqueryasp.netajaxjson

Picture transports during change

Is there a way to increase the size of images in a List without causing other images to move when hovered? Currently, when an image is hovered, it increases in size but causes the surrounding images to shift to a new line and I would like to avoid this beh ...

htmlcss

Obtain the content enclosed by HTML tags

Looking to extract text between html tags? Imagine having a list of cities in California, each within paragraph tags. Can you retrieve only the text inside the paragraph tags? <div class="cities"> <div><p>Los Angeles</p><h5 ...

javascriptjquery

Managing numerous range sliders in a Django form

My Request: I am looking to have multiple Range sliders (the number will change based on user selections) on a single page. When the sliders are moved, I want the value to be updated and displayed in a span element, as well as updating the model. The Issu ...

javascriptjqueryhtmlcssdjango

Does the AngularJS Controller disappear when the DOM element is "deleted"?

One challenge I encountered is regarding a directive that is connected to an angularjs controller, as shown below: <my-directive id="my-unique-directive" ng-controller="MyController"></my-directive> In the controller, at a certain point, I ne ...

javascriptjqueryangularjsdom

Utilizing and incorporating distinct html elements on a separate webpage

I am in the process of developing a dynamic newspaper-style website where articles will be regularly updated and replaced on the Home Page. Each article featured on the Home Page will serve as a link to a separate page for full details. These article links ...

html

Approach to Using Bootstrap 4 with Intl-Tel-Input

I've been attempting to integrate intl-tel-input with bootstrap 4, but I'm facing an issue where the placeholder for the input is not showing up. I've tried various solutions found online, but none of them seem to work. Here's my HTML ...

javascripthtmlcssbootstrap-4intl-tel-input

Difficulty altering link hover background color

I'm having trouble changing the hover effect background-color on the tweets of this page: Despite my efforts, all the links except for the latest tweets are working perfectly. What am I missing? Here's what I've been trying... <script& ...

javascriptjqueryhtmlcss

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

Here is some code I want to modify: https://i.stack.imgur.com/0C61Y.png I would like to add an arrow element at the top, similar to this: https://i.stack.imgur.com/pDT3s.png This will give it a popup-like appearance. Below is the CSS styling for the co ...

htmlcss

Display only the div on an iPad screen

Is there a way to show this DIV only on an iPad screen? I've looked around on Google for solutions, but none of them seem to work. It always ends up displaying on my computer as well. Is it possible to make it show only on an iPad screen? @media only ...

cssipad

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

javascripthtmlcss

Adjust the display from none to block when the parent element is set to flex

JSFiddle Demo Issue with - .popupcard_first:hover .popupcard_first { display: block; } I am trying to link the :hover effect to the first card only, but the only way I could make it work is by changing .popupcard... to .featured_cards:hover .po ...

htmlcssflexbox

Storing the closed state of a pop-up box in localStorage for future reference

I'm struggling to get localStorage working properly on my website (). Here's what I need to achieve: A newsletter subscription pop-up on every page - this part is functioning correctly An option for users to click 'X' to close the po ...

javascriptjqueryhtmlcss

Strip newline characters from information in AngularJS

What is the recommended approach for detecting and formatting the "\n\n" line breaks within text received from the server before displaying it? Check out this Fiddle: http://jsfiddle.net/nicktest2222/2vYBn/ $scope.data = [{ terms: 'You ...

javascriptjsonangularjs

Populating container with video element

I have divided my page into 4 quadrants using viewheight and percentage widths, which has been successful. Now, I want to insert a video in each div that can responsively fill its parent div. When I assign width: 100% to the video, it causes some alignmen ...

csshtml5-video