Avoid using ion-scroll for zooming purposes

Having trouble implementing zoom and scroll functionality for a simple image view using ion-scroll. As a newcomer to Ionic, I am struggling to achieve the desired result. Below is the snippet of my .js code and corresponding CSS class.

JS

<ion-content class="bg-color detail-cont">

    <ion-scroll class="filter-image" zooming="true" direction="xy" min-zoom="1" locked="false" has-bouncing="true">
        <div class="my-image" style="background: url('{{ getCurPhotoURI() }}')"></div>
    </ion-scroll>

</ion-content>

CSS

.filter-image {
    height:100% !important;
    width: 100% !important;
    background-color: black;
}
.my-image{
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center, center !important;
}

Can anyone help me identify what's going wrong in my implementation? Your assistance is greatly appreciated. Regards.

javascriptcssangularjsionic-framework

Answer №1

Is it possible that the issue with zooming is due to a missing setting? It seems that without setting the overflow-scroll property to false, the ion-scroll element cannot detect zooming.

To fix this, make sure your code includes:

<ion-content class="bg-color detail-cont">

<ion-scroll class="filter-image" overflow-scroll="false" zooming="true" direction="xy" min-zoom="1" locked="false" has-bouncing="true">
    <div class="my-image" style="background: url('{{ getCurPhotoURI() }}')"></div>
</ion-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

Creating AngularJS variables with dependencies on integer values

Hello, I am a brand new developer and I am currently working on creating an expenses calculator. The goal is to have the sum of inputted integers from a table, each with a default value, become the integer value of another variable. However, I seem to be m ...

javascriptangularjshtmlscopedata-modeling

What is the best way to align text in the center of a div?

I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...

javascripthtmlcss

Toggling classes in Angular for parent elements

Using an Angular Directive to Toggle Class: app.directive('toggleClass', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() { ...

angularjs

Creating Divs that Adapt to Screen Size in HTML

I currently have images in my HTML with hard-coded height and width due to a required transition effect. However, these three images are placed within a div. Is there a way to set the container div to a specific responsive height and width that adjusts f ...

htmlcssresponsive-design

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element: div.topfloat { position: fixed; top: 0; width: 100%; } The issue I'm facing is ...

htmlcss

Transferring data as a JSON object from PHP to JavaScript

My PHP file is named page.php <?php $php_variable = $_GET['param1']; $uv = str_replace("{ZIP Code}", $php_variable,'http://iaspub.epa.gov/enviro/efservice/getEnvirofactsUVDAILY/ZIP/{ZIP Code}/JSON'); $homepage = file_get_contents($u ...

javascriptphpajaxpost

What is the method for utilizing a parameter in a protractor configuration file to select specific steps?

After reading this particular question, I attempted to implement the following: protractor test/features/protractor-conf.js --params.test_set=dev_test as well as protractor-conf.js: exports.config = { // ... specs: [browser.params.test_set+'/ ...

javascriptangularjsseleniumtestingprotractor

Generating output from a callback function in TypeScript

When I execute a graphql query, the showUsers function is supposed to display all users (styled as boxes). However, at the moment, nothing is showing up. I am utilizing a functional component instead of a class component. This function is invoked after m ...

javascriptreactjstypescriptreact-nativerender

Link various data to various text boxes using a common ngModel property in Angular 8

In my project, I am working on creating a time-picker that will open when the user focuses on a text-box. The challenge I'm encountering is that although there are multiple text-boxes on a single page, binding the selected value from the time-picker u ...

javascriptangular

Failure to apply CSS to the class element instead of the div tag

Looking to update the CSS code below to change the color of a div to blue when it matches a specific class: I attempted the following changes, but they did not produce the desired result: &__header { display: flex; justify-content: space-betw ...

htmlcssvue.jssass

Increasing the size of a container without displacing the elements beneath it

There is an element on my webpage that, when hovered over, expands to reveal hidden text. The issue I'm facing is that this expansion causes the content below it to shift position. I attempted to use position:absolute, but it did not have the desired ...

htmlcssbootstrap-4css-position

Struggling to center a fixed width div horizontally in Internet Explorer

Currently in the process of creating a website template. To see an example, visit Framework Login Page The primary CSS file can be found here: master.css The centralizing of the main parent div is proving to be a challenge. This is the code I am using ...

htmlcssinternet-explorer

Leveraging personalized styles in Kendo UI

Currently, I am utilizing the robust Kendo UI HTML Framework within my web application for its exceptional support of MVVM functionality. While I appreciate the convenience that Kendo offers with MVVM, I am in need of a solution that allows me to leverage ...

jquerycsskendo-uikendo-mvvm

A clever JavaScript function generator encapsulated within an instant function nested within a jQuery ready statement

This code snippet features an immediate function enclosed within a jQuery ready function. $((function(_this) { return function() { document.write('called!'); }; })(this)); I am puzzled by where the resultant function ...

javascriptjqueryclosuresfactory

Error message: Element not found while running onPrepare in protractor.conf.js

I am currently in the process of writing end-to-end tests for an AngularJS application using Jasmine and protractor. I have encountered an issue with the onPrepare function in the protractor.conf.js. When I perform the following actions within a beforeAl ...

angularjsjasmineprotractor

Restrict the hide/show functionality on a div to only operate within its specific radio group, without impacting the other radio groups within the form

I created a form with 3 radio groups that show different sets of divs based on the selection made. The issue I'm facing is that the current code hides radio content divs across all 3 radio groups. How can I fix this? My goal is to display all "Yes" c ...

javascripthtmljquerybootstrap-4

What method is most effective for combining two JSON files in Angular?

My data includes a json file with a product list that looks like this: [{"id":76, "name":"A", "description":"abc", "price":199, "imageUrl":"image.jpg", "productCategory":[{ "categoryId":5, "category":null },{ "categoryId":6, " ...

javascriptjsonangulartypescript

Display the accurate duration based on the dates selected in an HTML form automatically

If someone has office hours on Monday, Wednesday, and Friday from 7:00 am to 7:00 pm, and on Tuesday and Thursday from 10:00 am to 9:00 pm, the dropdown menu should display only the timings of 7:00 AM to 7:00 PM if the selected date is a Monday, Wednesda ...

javascriptjqueryhtml

Developing an npm module that is compatible with both web browsers and Node.js

Currently, I am in the process of developing an npm package that will cater to both web apps and other node modules. If my focus was solely on browsers, I would simply assign window.myExport = myExport; as a direct solution (unless there is a more contemp ...

javascriptnode.jsnpmnode-moduleses6-modules

Utilizing React Selector: Propagating the onChange Event Up Two Components

Struggling to pass an onChange event from React selector through two components back up to the parent App. The issue is that e.target.value is coming back as undefined, indicating that the event might not be returning properly. Can someone pinpoint what&ap ...

javascriptreactjsonchange