Title: Bottom Navigation tab does not return to its initial style when it's no longer active on android · Issue #8235 · NativeScript/NativeScript · GitHub
Open Graph Title: Bottom Navigation tab does not return to its initial style when it's no longer active on android · Issue #8235 · NativeScript/NativeScript
X Title: Bottom Navigation tab does not return to its initial style when it's no longer active on android · Issue #8235 · NativeScript/NativeScript
Description: Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project): CLI: 6.3.2 Cross-platform modules: 6.3.2 Android...
Open Graph Description: Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project): CLI: 6.3...
X Description: Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project): CLI: 6.3...
Opengraph URL: https://github.com/NativeScript/NativeScript/issues/8235
X: @github
Domain: github.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Bottom Navigation tab does not return to its initial style when it's no longer active on android","articleBody":"**Environment**\r\nProvide version numbers for the following components (information can be retrieved by running `tns info` in your project folder or by inspecting the `package.json` of the project):\r\n - CLI: 6.3.2\r\n - Cross-platform modules: 6.3.2\r\n - Android Runtime: 6.3.1\r\n - iOS Runtime: 6.3.0\r\n\r\n**Describe the bug**\r\nWhen there's a css class for active TabStripItem and there's no default css class for the TabStripItem after selecting the tab the class is applied and when the tab is changed it does not return to the previos state. \r\nThis happens only on Android, but not on iOS.\r\n\r\n**To Reproduce**\r\nCreate a new application and add bottom-navigation inside and add the following style:\r\n```CSS\r\nTabStripItem:active {\r\n background-color: red;\r\n}\r\n```\r\nRun the application on android and select the second tab. The background of the initial tab stays red and does not return to its initial state.\r\n\r\n[Playground demo](https://play.nativescript.org/?template=play-tsc\u0026id=ROqZGn\u0026v=1)\r\n\r\n**Expected behavior**\r\n\r\nThe first tab should return to its initial state.\r\n\r\n**Additional context**\r\nIf there's a default style for the TabStripItem like this:\r\n```CSS\r\nTabStripItem {\r\n background-color: green;\r\n}\r\n```\r\nit will be applied when the tab is no longer selected. So this can be used as a workaround.\r\n\r\n[Here's the same playground demo with the applied workaround](https://play.nativescript.org/?template=play-tsc\u0026id=ROqZGn\u0026v=2)","author":{"url":"https://github.com/vtrifonov","@type":"Person","name":"vtrifonov"},"datePublished":"2020-01-09T16:08:55.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/8235/NativeScript/issues/8235"}
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:12a17389-7707-1373-8e2a-e6748555ce5b |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | C4E0:3DCC68:280BEC4:33C32CD:6974C780 |
| html-safe-nonce | 3693e06a8deb1b8f0d80c648f5096253f80c211cb28e7504993b0e067bb73b26 |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJDNEUwOjNEQ0M2ODoyODBCRUM0OjMzQzMyQ0Q6Njk3NEM3ODAiLCJ2aXNpdG9yX2lkIjoiNjY3ODkwODc1NTM0MjgzNzYzMiIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9 |
| visitor-hmac | 427d6768d856b1bb6fad1f1ff905254d2a7a9888284081d87ca7b92341a6da9b |
| hovercard-subject-tag | issue:547573509 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/NativeScript/NativeScript/8235/issue_layout |
| twitter:image | https://opengraph.githubassets.com/4559f8e542ffe8b02400df4c881eaa3e88b5991f5bf73a7f94f5c446bd3e9dc1/NativeScript/NativeScript/issues/8235 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/4559f8e542ffe8b02400df4c881eaa3e88b5991f5bf73a7f94f5c446bd3e9dc1/NativeScript/NativeScript/issues/8235 |
| og:image:alt | Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project): CLI: 6.3... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | vtrifonov |
| hostname | github.com |
| expected-hostname | github.com |
| None | 4a4bf5f4e28041a9d2e5c107d7d20b78b4294ba261cab243b28167c16a623a1f |
| turbo-cache-control | no-preview |
| go-import | github.com/NativeScript/NativeScript git https://github.com/NativeScript/NativeScript.git |
| octolytics-dimension-user_id | 7392261 |
| octolytics-dimension-user_login | NativeScript |
| octolytics-dimension-repository_id | 31492490 |
| octolytics-dimension-repository_nwo | NativeScript/NativeScript |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 31492490 |
| octolytics-dimension-repository_network_root_nwo | NativeScript/NativeScript |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 488b30e96dfd057fbbe44c6665ccbc030b729dde |
| ui-target | canary-2 |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width