The scrolling feature in Fancybox modals is malfunctioning

Hey everyone, I'm having some trouble with the fancybox modals on this website: . The modals seem to be acting up - sometimes scrollbars show up, but you can't scroll using the mousewheel or trackpad. I've tried tinkering with the fancybox js and css files, but unfortunately, my attempts have been unsuccessful.

Currently, in my CSS, I have the following code:

.fancybox-inner .event-area .event .col-md-12 {
   height:400px;
   overflow-y: scroll;
}

I believe this is the correct selector, but I could be wrong. If anyone has any insights or suggestions, please share them with me. I've been troubleshooting this for days and would really appreciate some help!

Thank you!

javascriptjquerycsswordpressfancybox

Answer №1

Your existing code is not effective and should be deleted.

.fancybox-inner .event-area .event .col-md-12 {
   height:400px;
   overflow-y: scroll;
}

Simply include the following CSS in your style.css file:

.event-area > .row > .col-md-12 {
    height: 363px;
}

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

Guide on importing a CSS/SCSS file into a class from a node_module in order to modify the theme of a component

I am utilizing syncfusion components in my project. My goal is to have a specific component switch to Dark theme when the app-dark class is applied to the containing div element. In order to achieve this, I need to import two themes as shown below: @impor ...

cssangularsasssyncfusion

Does DraftJS prompt content change when focused?

There is an editor on a page with a 'save' button. The goal is to only display the 'save' button if there are changes since the last save. When saving, this.setState({hasChanges: false}) is set and in the onChange function, hasChanges i ...

javascriptreactjsdraftjs

The XHR XML responseType in its unadulter

Is it feasible to adjust XHR settings in order to receive an HTML document? xhr.responseType = "document"; Upon receiving the response, xhr.responseXML contains an HTML document parsed against the HTML namespace URI. To verify this, you can use: xhr.res ...

javascriptxmlxmlhttprequest

Javascript: Issue encountered while the page was loading

Whenever I make an API call, an error keeps popping up every time the page loads. I can't seem to figure out why it's happening. Can anyone shed some light on this? I've tried to include the link: https://i.stack.imgur.com/3Ul0S.png This ...

javascriptjsonvue.js

Hiding content in HTML with the Display:none property

After exploring various posts on this topic, I am still unable to find a solution that fits my specific scenario. Despite the challenges, I thought it would be worth asking for recommendations. Currently, I have a PowerShell script generating a report in ...

javascripthtml

Getting information from Button-Group using JavaScript

I have a similar question that was previously asked here: Get Data-Values from Selected Bootstrap Button Group (Checkboxes) and Assign to Input However, my structure is different because I need a group of buttons with the option to select more than one. ...

javascripthtmlbuttonbootstrap-4

What is the best way to choose CSS class attributes using Mootools and the getStyle()

Seeking to duplicate an object, I am trying to figure out how to retrieve class CSS attributes from Mootools. css: .card { width: 109px; height: 145px; } html: <div id="cards"> <div class="card" id="c0"> <div class="face fron ...

javascriptcssmootools

Unable to interpret Python/Django-generated JSON object on client side

I'm encountering an issue while passing a data object from a Python/Django application to the frontend using AJAX in JSON format. Despite everything appearing to be functioning correctly, I am unable to properly parse the JSON object within JavaScript ...

javascriptpythonjsondjangoajax

Utilizing enum values as a data type for efficiency

Having an enum called AudioActionTypes: export enum AudioActionTypes { UpdateMusicData = 'UPDATE_MUSIC_DATA', UpdateVoiceData = 'UPDATE_VOICE_DATA', UpdateSoundData = 'UPDATE_SOUND_DATA', } There is a function that disp ...

javascriptreactjstypescriptredux

Leverage the URL parameter with variables in HTML using AngularJS

I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...

javascripthtmlangularjs

Verify whether the items within the ng-repeat directive already contain the specified value

I am facing an issue with displaying a JSON string of questions and answers in ng-repeat. The problem is that I want to display each question only once, but show all the multiple answers within ng-repeat. {Answer:"White",AnswerID:967,answer_type:"RADIO",f ...

javascriptangularjsangularjs-ng-repeatangular-ng-if

Navigating within a React application using React Router 2.6.0 by triggering a redirection within a click

Currently, I am experiencing an issue while utilizing react-router for constructing a login system with firebase and react. The desired functionality involves redirecting the user to the home page upon successful authentication of their username and passw ...

javascriptreactjsreact-router

Is it possible to run an existing NextJS app with API routes on a mobile platform using either Capacitor or Expo?

I have an established NextJS application that heavily relies on Next's API routes. My goal is to transition the current codebase to function in a mobile environment. I've experimented with Capacitor and attempted to export it as a static site, bu ...

javascriptnext.jsmobileexpocapacitor

Retrieve session information from a page loaded with AJAX requests

At the beginning of my website, I initiate a session. In another part of the page, I have included the navigation bar in a file called nav.php: <div class="inner"> <ul id="nav" class="menu"> <li class="first"><a href="#">Home&l ...

phpjqueryajaxsession

Developing a vanilla JavaScript web component with distinct HTML and JavaScript files

As I delve into creating vanilla JS web-components, I am exploring methods to keep the template HTML separate from the JS file, ideally in a distinct HTML file. I have examined various implementations of native JS web-component setups found notably here, ...

javascripthtmlweb-componentnative-web-component

Ensure that the div extends to the bottom of the page

I'm currently working on a web design assignment for one of my courses, and I'm facing some challenges with getting the div elements to span the entire page in terms of color. http://jsfiddle.net/vmm1s4Lt/ http://codepen.io/bmxatvman14/pen/fih ...

htmlcss

Steps for transforming an Array of hierarchical data into the correct JSON format for D3 Tree Region visualization

I am struggling with converting an array of hierarchy data into the correct Object format. Here is what I am trying to convert: [ {"PARENT_ID": 0,"CHILD_ID": 1,"NAME": "Quality","LEVEL_A": 0}, {&qu ...

javascriptarraysjsond3.js

Using AJAX to retrieve JSON information

Looking for advice on improving my script to fetch JSON data from a server file using AJAX. I am struggling with organizing it into a functional structure. Below is the current implementation: function getJSON (file) { var request = AjaxRequest(); ...

javascriptajaxjson

Fluid div causing navigation to display improperly

I am currently working on a navigation design where I want to have an image above each list item instead of having individual images for each item. It looks great when the screen is at full size, but as soon as I minimize it, the list items start stacking ...

htmlcss

Efficiently merging data from various AngularJS resources

I've encountered a recurring scenario while developing Angular apps, especially when utilizing a Drupal API. I'm seeking advice on best practices for handling this specific issue. Currently, I am working on an app that interacts with a Drupal AP ...

javascriptarraysangularjsangularjs-ng-repeatangular-resource