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/vue@5.5.0-dev.202011091500.039d75c @ionic/vue-router@5.5.0-dev.202011091500.039d75c

[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 #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 < notifications@github.com>:

…

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 <#22456 (comment)>, 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.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.