Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add inappbrowser reposition and resize attributes #756

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

hamzasharuf
Copy link

@hamzasharuf hamzasharuf commented Aug 9, 2020

Platforms affected

Android & IOS

Motivation and Context

Closes #668
This feature was required by some developers to make the InappBrowser positionable and resizable so that they have the flexibility to position the webview in a specific location on the screen. The feature was mentioned in issue #668

Description

The added feature allows the developers to add a custom position to the InappBrowser to be positioned in a specific x & y location on the screen as well as specifying the width and height with the ability to interact with any content beneath.

Checklist

  • I've run the tests to see all new and existing tests pass
  • I added automated test coverage as appropriate for this change
  • Commit is prefixed with (platform) if this change only applies to one platform (e.g. (android))
  • If this Pull Request resolves an issue, I linked to the issue in the text above (and used the correct keyword to close issues using keywords)
  • I've updated the documentation if necessary

@hamzasharuf hamzasharuf changed the title Add custom window attributes Add inappbrowser reposition and resize attributes Aug 9, 2020
@PDLMobileApps
Copy link
Contributor

Hi,
have you tested this change with a page containing a form with several editable fields that triggers the keyboard and force the page to scroll? In PR#655 we had an issue with that scenario, as the keyboard would appear but the window would not resize (even if was specified in the AndroidManifest.xml) causing some element in the page not to be visible.

We had to change the way we resize the iab window for it to work. The basic idea is within this code:

dialog.getWindow().setGravity(Gravity.TOP);
dialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, windowHeight); 

@hamzasharuf
Copy link
Author

@PDLMobileApps The changes were tested on a simple app with some different components behind the browser dialog to test the ability to interact with them while the browser is still visible.

When I tested it with the editable fields, I noticed this keyboard issue and it was fixed by adding the FLAG_NOT_FOCUSABLE which allows the dialog to receive touch events from the main webView. The changes don't affect the window's resizing behavior with the keyboard and it scrolls as usual.

window.setFlags(LayoutParams.FLAG_NOT_FOCUSABLE,LayoutParams.FLAG_NOT_FOCUSABLE);

However, for the gravity, it was assigned as follows

wlp.gravity = Gravity.TOP | Gravity.LEFT;

to make sure that the dialog's (X & Y) positions will start from the top left corner (not just from the top edge)

@AntonioStipic
Copy link

Any update on this PR?

@troelsvest
Copy link

Any update?

@monove
Copy link

monove commented Jan 27, 2021

@hamzasharuf 0dc9492 doesn't seem to work for me. Any ideas?

@hamzasharuf
Copy link
Author

@hamzasharuf 0dc9492 doesn't seem to work for me. Any ideas?

I've tried it on multiple Android & IOS devices with different versions and it seems to work perfectly.

@prashant18-code
Copy link

@hamzasharuf could you please help with how to include x, y, width and height values in "option" string ? It doesn't seem to be working for me with the way i include these value as below : -
const browser = this.iab.create("https://www.google.com/", "_blank", "location=yes, x=0, y=200,width=430,height=650,toolbar=no");

I also tried by adding insertCSS() method like below but that doesn't work either
browser.on('loadstop').subscribe(event => {
browser.insertCSS({code : "html{margin-top:40px;}"});
});

Dear Author - Basically, I would like to know whether I can resize the in-app browser in such a way that some part of my app-screen(e.g. header/footer) must stay as it is and in-app browser should just open in the app screen itself. -- is this possible ?

@vveil
Copy link

vveil commented May 21, 2021

Are there any updates on this? Is this going to be merged soon? I would really like to use the new features!

@vveil
Copy link

vveil commented May 21, 2021

@hamzasharuf 0dc9492 doesn't seem to work for me. Any ideas?

I've tried it on multiple Android & IOS devices with different versions and it seems to work perfectly.

I've just tried to reposition the IAB with the option y=60 on an Pixel 3a Emulator, but it doesn't seem to work. When I add any height to the options the y-option also works. I don't think that this is the wanted behavior.
Only using the y-option works perfectly on an iOS-emulator.

@vveil
Copy link

vveil commented Jun 13, 2021

@hamzasharuf 0dc9492 doesn't seem to work for me. Any ideas?

Doesn't seem to work for me neither. Keyboard just wont pop up, doesn't matter what I do. Did you get it to work? I'm kinda struggling.

Edit: Test Device: Pixel 4a, Android 11

@Topiya
Copy link

Topiya commented Mar 11, 2022

I am looking for a same thing. Any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature: Support of opening the inappbrowser with specific coordinates, width & height
8 participants