Ionic-framework: bug: ionic vue tab-bar slot="top" not working

[j--w]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:

In ionic vue when using slot of top for ion-tab-bar the tab bar stays pinned to the bottom.

Expected behavior:

The tab bar is pinned to the top.
Steps to reproduce:

1. Run ionic start myApp tabs --type vue
2. In src/views/Tabs.vue change the slot attribute of ion-tab-bar to "top"

Related code:

https://github.com/j--w/ionic-vue-tabs-top

<ion-tab-bar slot="top">

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.12.1 (/Users/jimpersonal/.nvm/versions/node/v12.18.3/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.4.3

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.2

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.3 (/Users/jimpersonal/.nvm/versions/node/v12.18.3/bin/node)
   npm    : 6.14.6
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected]

[j--w]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

Confirmed, that does fix it. Nice work!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22461, and a fix will be available in an upcoming release of Ionic Framework.

[DennisBusk]

I am sad to say that it is not working.
I have updated to all the latest and it still doenst seem to work
` "dependencies": {
"@capacitor/android": "^2.4.3",
"@capacitor/core": "^2.4.3",
"@ionic/pwa-elements": "^3.0.1",
"@ionic/vue": "^5.5.0",
"@ionic/vue-router": "^5.5.0",
"cordova-plugin-file": "^6.0.2",
"core-js": "^3.7.0",
"register-service-worker": "^1.7.1",
"vue": "^3.0.0-0",
"vue-i18n": "^9.0.0-beta.8",
"vue-router": "^4.0.0-rc.5"
},
"devDependencies": {
"@capacitor/cli": "^2.4.3",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "^4.5.9",
"@vue/cli-plugin-e2e-cypress": "^4.5.9",
"@vue/cli-plugin-eslint": "^4.5.9",
"@vue/cli-plugin-pwa": "^4.5.9",
"@vue/cli-plugin-router": "^4.5.9",
"@vue/cli-plugin-typescript": "^4.5.9",
"@vue/cli-plugin-unit-jest": "^4.5.9",
"@vue/cli-service": "^4.5.9",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-beta.10",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-alpha.6"
}

Schedule
6

`

[liamdebeasi]

@DennisBusk Can you provide a GitHub repo that shows the issue still happening?

[DennisBusk]

@liamdebeasi
Yes..
Here:
https://github.com/DennisBusk/temp

It is stille very early in development.
But the problem persists

[liamdebeasi]

Hmm can you send a screenshot of what you are seeing? The Tab Bar does appear on the top for me. Your ion-content had :fullscreen="true" which caused your ion-header to appear over the tab bar.

[DennisBusk]

Okay.. great..
sorry about that.

Thanks for a fantastic product and support.

Den tir. 24. nov. 2020 kl. 19.55 skrev Liam DeBeasi <
[email protected]>:

Hmm can you send a screenshot of what you are seeing? The Tab Bar does
appear on the top for me. Your ion-content had :fullscreen="true" which
caused you ion-header to appear over the tab bar.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic-framework/issues/22456#issuecomment-733170100,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACFP64GF3XRQVZDLVGQONILSRP6SBANCNFSM4TORWRWA
.

--
Dennis Busk
Fyrreparken 12
8961 Allingåbro
DK
60619959

[liamdebeasi]

Does removing :fullscreen="true" resolve the issue for you?

[DennisBusk]

Yes it did..
Thank you.