Comments (4)
As per documentation this is intended result.
The mode determines which platform styles to use.
remove mode from router-outliet and it will work as intended.
from ionic-framework.
Maybe I didn't explain the issue well enough.
It is only applying the mode set on the ion-router-outlet
to conditionally rendered components (things rendered inside an @if,*ngIf,@for,*ngFor...). Not all the components.
So the expected behavior is that it would either
- apply the mode set on the
ion-router-outlet
to all components, or - none and only the
ion-router-outlet
itself.
Example.
If the md
mode is set on the ion-router-outlet
, and you have two ion-selects
. One ion-select
is inside an *ngIf directive and you are running your app on an iphone. The ion-select
NOT in the *ngIf will be using mode ios
, the one inside the *ngIf will be using mode md
. I replicated this in the repo attached to the issue.
from ionic-framework.
Any updates on this?
from ionic-framework.
Apologies for the delay. I can confirm that this is fixed in Ionic 8.
In previous versions of Ionic, your page component was initially mounted as a sibling of ion-router-outlet
and was later moved to be a child of it. When the page component is initially mounted, Ionic does not consider the mode
set on the RouterOutlet (since it's not an ancestor at the time) when trying to determine the Item's mode.
By the time the delayed Item in your demo was added, the page component had already been moved to be a child of the RouterOutlet, so now Ionic does consider the mode
set on that component.
In Ionic 8 we fixed this so the page component is always mounted as a child of the RouterOutlet initially, so no moving is needed.
from ionic-framework.
Related Issues (20)
- feat: ion-searchbar helperText HOT 6
- bug: ion-input debounce is not set with binding syntax on initial load HOT 4
- bug: iOS - Tap on status bar doesnโt scroll to top HOT 3
- feat: status bar dark in dark-mode HOT 4
- bug: item borders effectively invisible in md dark mode HOT 4
- bug: bundle size increase with IonicModule and lazy loaded web components in v8.0.1 HOT 4
- bug: root remains `aria-hidden` after dismissing multiple overlays consecutively
- bug: IonPage occasionally doesn't render when navigating quickly
- [TRAINING] bug: ion-input retained in memory after removed from DOM
- CapacitorHttp FormData Not Supported on Android Device but it working fine on ionic serve(browser) HOT 1
- bug: Keyboard expansion unable to push bottom elements HOT 1
- bug: ion-header with collapse="fade" displays background and border temporally HOT 1
- bug: Unexpected ion-menu opening on another page
- bug: tab sub-page navigation breaks occasionally with ionic-vue-router
- bug: segment does not set active button when dynamically changing options in angular HOT 4
- @ionic/react-router not compatible with latest version of ERROR in ./node_modules/@ionic/react-router/dist/index.js 890:18-28 export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom HOT 3
- [TRAINING] bug: button retained in memory after removed from DOM
- bug: scroll element not reachable in CI HOT 1
- bug: occasional page animation issues
- bug: ion-item + ion-checkbox on 'start' slot not respect width on v8 (v7 was ok)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-framework.