Set InAppBrowser or Themeable Browser height to show app's bottom tabs

Ionic Framework
1

I’ve searched about this around ionic forums, stackoverflow, etc., but I still haven’t found an answer.

I’m creating an ionic app with an inappbrowser inside and I want it to be like a part of the app with the bottom tabs showing.

Others suggested to use iframe but I’m not sure if that’s good since they’re also saying that it has issues uploading to the apple app store.

My folder structure:

  • Tabs Folder
  • Page 1 Folder (Where the inappbrowser is located)
  • Page 2 Folder (This page shows with the tabs and has no problem)

Here’s the code in the page 1 folder:

this.platform.ready().then(() => {
  const browser = this.iab.create(url, '_blank', {location:'no', 
  footer:'no', zoom:'no', usewkwebview:'yes', toolbar:'no'});
});

and Here’s the routes of the tab folder:

const routes: Routes = [{
  path: 'tabs',
  component: TabsPage,
  children: [
    {
      path: 'page1',
      children: [
        {
          path: '',
          loadChildren: '../page1/page1.module#page1Module'
        }
      ]
    }

I understand that inAppBrowser covers all the parts of the app and has the absolute position, so the solution I’m thinking is to just set a height for the inAppBrowser so that it will not cover the bottom tabs, but is that possible?

2

Hi @marcelwade,

That’s a great question. I don’t think you can, since the plugins don’t have any option to specify a view height. Besides, even if the browser were on top and don’t cover the tabs, they most likely wouldn’t receive the click events anyway so it wouldn’t be functional.

Maybe somebody has found a workaround for this, but I haven’t seen anything, and I’ve been using Cordova for a very long time.

Best,
Rodrigo

3

Did you got any solution for this issue ??

4

Anybody got a solution?

It is sad that after so long even cordova / ionic have a solution for such a normal situation as showing an external website without losing an APP navigation menu superimposed on the InAppWebBrowser. Even if someone has created a new plugin for a more customizable InAppWebView.

We have lost projects for not being able to do this. I recently saw a project that succeeded with ionic + inappbrowser and always leaving an ion-footer visible on the browser. They used a cordova-plugin-browsertab but I don’t know how they did it

Please any ideas?