[SOLVED] Tabbar on iOS not displaying in NativeScript WebView

Questions
1

Hi. Thank you for framework7 - it rocks!

Given that

  • the vanilla demo you provide in your webpack starter works in NativeScript’s WebView app
  • the f7 app renders perfectly in mozilla and webkit
  • the default tab of the f7 app renders in body/view of NativeScript app (iOS)

I am convinced that the tabbar is there but simply not visible.

I’ve been able to reproduce with the same aspect ration of the iPhone8plus in Mozilla browser.

Here is a copy of the webpack project - https://gitlab.com/mmsupport/component_url

PastedGraphic-1
PastedGraphic-1.png2034×1512 500 KB

PLEASE SEE VIDEO SCREENCAST of issue
PLEASE SEE VIDEO SCREENCAST of issue
PLEASE SEE VIDEO SCREENCAST of issue

2

I see it has toolbar-bottom-md class which says to be on bottom for MD theme, but on your screenshots is iOS theme, and it doesn’t have position specified for iOS theme

3

@nolimits4web thank you. Can you point me to a resource I can read more about this ?

  • I had no clue there’s different themes and - v3 docs doesn’t specify themes except for color & touch
  • Where is the iOS theme. Is it specified or implicit ?
4

In f7 app declaration I put

const app = new Framework7({
  root: '#app',
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'md', // was 'auto'
  // App routes
  routes: routes,
  L: L,
});

I changed theme attribute from ‘auto’ to ‘md’