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

#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