CODEWITHSUNDEEP
androidcordovaphonegap-pluginsphonegap-build
Dmitry Gamolin
Dmitry Gamolin

Reputation: 1006

Disable zoom buttons in Phonegap's inappbrowser

After hours of searching and trying different things I'm close to give up. I want to open an external URL in the inAppBrowser that is now included to the Phonegap Build. I remove the address bar with location=no (also tried toolbar=no, but it didn't do anything), however the zoom (+ and - buttons) that appears whenever you scroll the page won't go away. I can't find a way to disable it, but maybe I overlook something? I'd just use the pinch zoom, so I don't see the reason to have these ugly buttons on top of the page (which is designed specifically for this app).

So is there a way to disable built-in zoom buttons?

I'm testing on Android, but planning to also work on the iPhone version.

Upvotes: 5

Views: 9486

Answers (8)

AtrujanoX
AtrujanoX

Reputation: 1

Looks like the options string has to have no spaces between options. I used:

var options  = "location=no,zoom=no";

which then enters here:

var ref = cordova.InAppBrowser.open('https://treiz.mx', '_blank', options);

And now it runs perfect.

Upvotes: 0

BenjaBoy
BenjaBoy

Reputation: 480

Go to folder structure root}\platforms\android\app\src\main\java\org\apache\cordova\inappbrowser\inappbrowser.java

then search for "zoom", in every place change it zoom="false" it worked for me.

Cordova 10.0.0, Android Studio 4 ,2021

Upvotes: 1

A. Yosupov
A. Yosupov

Reputation: 145

Using the InAppBrowser plugin, I encountered the same problem.

I managed to hide the +/- "ugly" buttons, but keep the zooming behavior (using pinch gesture) by changing the InAppBrowser.java file, and using the following commands :

WebSettings settings = inAppWebView.getSettings();
settings.setBuiltInZoomControls(true); // enable built-in zoom mechanisms
settings.setDisplayZoomControls(false); // disable WebView's zoom controls display

Found it here: https://developer.android.com/reference/android/webkit/WebSettings.html#setDisplayZoomControls(boolean)

Upvotes: 6

mdb
mdb

Reputation: 51

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Use this meta tag in webview external page Thanks...

Upvotes: 5

MD.Riyaz
MD.Riyaz

Reputation: 412

try this: var authWindow = window.open(authUrl, '_blank', 'location=no,zoom=no,toolbar=no');

Upvotes: 1

G&#246;rkem &#214;ğ&#252;t
G&#246;rkem &#214;ğ&#252;t

Reputation: 1791

try zoom=no

you can find details on cordova inappbrowser plugin documentation: https://github.com/apache/cordova-plugin-inappbrowser

Upvotes: 6

Obzzen
Obzzen

Reputation: 178

This only remove the zoom button and it is for IOS only:

Open the file in your project:

[YourAppName]/platforms/ios/[YourAppName]/Plugins/org.apache.cordova.inappbrowser/src/ios/CDVInAppBrowser.m

Find and change from this:

[self.toolbar setItems:@[self.closeButton, flexibleSpaceButton, self.backButton, fixedSpaceButton, self.forwardButton]];

to this:

[self.toolbar setItems:@[self.closeButton, flexibleSpaceButton]];

And then build the project with the command line.

Upvotes: 2

user3677008
user3677008

Reputation: 61

I had the same issue, but using Cordova instead of Phonegap Build. The trick that did it for me was to change line 575 of InAppBrowser.java to settings.setBuiltInZoomControls(false);.

That won't work for iOS of course, but as far as I know there is no other build in way provided by Phonegap/Cordova.

Upvotes: 6

Related Questions