Trouble with scrolling on FancyBox2 and Droid 2.3.4

I have encountered an issue with my Droid 2.3.4 where when I view content through iFrame in Fancybox2, scroll bars are not showing up. Despite trying various solutions that I came across, nothing seems to work. Interestingly, all other browsers like iPhone 5 and iPad display the content properly, but my Droid is giving me trouble.

Below is the calling function:

$('.various').fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '95%',
    height      : '70%',
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'elastic',
    closeEffect : 'none',
    helpers : {
        overlay : {
            locked : false
        }
    }
});

I've experimented with different CSS options like overflow:scroll or using !important, but none of them seem to make a difference. I even attempted to implement iScroll, but it also did not enable scrolling on my device.

If you have any suggestions or ideas, please share them with me. I am considering implementing separate handling for Droid devices to open a different page as a last resort, but I would prefer to avoid this if possible.

Answer №1

In my personal experience with my old phone, I've noticed that Android 2.3.x does not support secondary scroll bars, only the browser's own scroll bar.

This issue is quite significant as Android 2.3.x still makes up more than half of the active Android devices.

The workaround for this is to allow fancyBox to extend beyond the viewport height so that users can access the full content using the main scroll bar.

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

Unveiling the Solution: Deactivating CSS Style Hints in VS Code!

click here to view the image Can anyone guide me on how to turn off the style hint feature in VS Code while working with CSS? ...

Is it possible to move the login button to the right side of the screen?

I'm attempting to move the Login menu all the way to the right on the navigation bar. Currently, all the menu items are aligned to the left and I need to align the Login menu to the right. However, I'm unsure of where to begin. The navigation me ...

Unable to locate the specified CSS file

I've been diving into the world of NativeScript and exploring the tutorials provided at . However, I'm facing an issue with getting the platform specific CSS to work properly. Every time I try to run the code, I encounter the following error mess ...

Icon not appearing within the input group

Is there a way to design an input group that includes both a text field and an icon placed at the beginning of the text field? The code below demonstrates my attempted implementation, however, it appears that only the text field is visible without the acco ...

When utilizing JQuery AJAX for form submission to PHP, the returned data is not populated

Upon running the code below, I am encountering an issue where the "data" returned appears to be an empty string "[]". This observation is made through the Chrome Console Viewer. If I disable the "event.preventDefault();" line in the JavaScript, it trigger ...

Using JQuery mobile to switch pages with a swipe gesture

I am struggling to understand why I can't change pages in my JQuery mobile document when I swipe right. The swipe event is written correctly because when I test it with alert("test"); it works fine. This is the code I've used: <script> $( ...

Is it possible to implement counters in CSS with Jquery?

I am trying to implement a specific style when an if statement is executed, but Jquery is encountering syntax issues and generating errors. Does anyone have a solution for escaping these errors so that I can still apply the desired styling? The problemati ...

What is the best way to customize the color of a bootstrap badge?

I'm trying to customize a bootstrap badge with a different color. As I am relatively new to frontend development, I may be asking a basic question, but I created the following CSS: .badge .badge-danger{ color:#FFFFFF; } I then added the new CSS af ...

How can you create a unique custom border for an image and display it on another image?

I am working towards achieving a specific output similar to the one shown in this https://i.stack.imgur.com/ejiYC.png image. Currently, I have successfully created the border section. Now, my next challenge is how to overlap images and apply borders as de ...

pass data between different screens

Attempting to utilize putExtra and getExtra with Bundle for sharing variables across different activities: This is my main class snippet: if(liftSelected==true && repsSelected==true){ Intent intent = new Intent (this, Log.class); ...

elegant tree structure dynamically loads data via AJAX when clicked

Currently, I am utilizing fancytree to build a tree structure based on data sourced from MySQL... Visit Fancytree Wiki for more information I have the intention of updating the database whenever there is a change in this structure. Below is an excerpt of ...

"Carousel indicator navigation malfunctioning in bootstrap slider with unresponsive click behavior

I'm currently working on modifying the code below. I've managed to separate the indicators from the bootstrap carousel. Everything seems to be functioning well, except for one issue - when I click on the list of indicators, although the image cha ...

Angular - Dynamically change the height of an input element based on its content's length

I'm looking to automatically adjust the height of my input text based on its content. I have a solution that works when the user is actively typing, triggering the (input) event and calling my adjustHeight function to update the input element's h ...

The $.getJSON function seems to be malfunctioning and is not returning the expected data, instead, showing [object Object

I seem to be encountering a common issue with my ajax call not retrieving the JSON data. It appears that it may be due to an array and not using the correct index, although I am indeed utilizing an index on the front-end. Despite trying various solutions f ...

Closing the modal by simply clicking outside of it's boundaries

Is there a way to close the modal by clicking outside of it using pure JS or AngularJS? I'm struggling to figure out how to implement this functionality. Any assistance would be greatly appreciated. View Fiddle .modalDialog { position: fixed; ...

Aligning the text in the left div vertically based on the right div's position

I am currently working on aligning two parallel div boxes, each containing text. The width of these div boxes is not fixed and changes based on a percentage. My challenge is to make the text in the left div box start at the same position as a heading in th ...

No data received from asp.net application while testing on the emulator

When trying to access my web application from Visual Studio using an Android emulator, I encounter an empty response error in the browser. Accessing the local application from my computer works fine. I tried using the IP address 10.0.2.2 on the Android e ...

CSS nested classes incorporate styles that are distinct from the less nested styles

I am currently working with CSS, where I have defined the following style: .main> .test{ display: block; background:#FFFFFF } The style is saved in a file that I prefer not to modify. However, my new HTML structure looks like this: <div class="m ...

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

Is there a way to temporarily toggle classes with jQuery?

Incorporating ZeroClipboard, I have implemented the following code to alter the text and class of my 'copy to clipboard button' by modifying the innerHTML. Upon clicking, this triggers a smooth class transition animation. client.on( "complete", ...