Prerequisites
Ionic Framework Version
v8.5.x
Current Behavior
When using sheet modals with expandToScroll = false, the cloned footer will not clone the stylesheets the original footer has.
This is noticeable immediately with iOS stylesheets applied, as the following style from modal.ios.scss will not be applied to the cloned footer
: host (.modal-sheet .modal-no-expand-scroll ) ion-footer ion-toolbar : first-of-type {
padding-top: $modal- sheet- padding- to p;
}
footer.mov
Expected Behavior
The same styles should be applied to the cloned footer.
Steps to Reproduce
Create a sheet modal with expandToScroll = false
Apply custom styles to the footer and the elements in it. They must not be inlined, because inline styles will be cloned over.
Open the modal and change breakpoints.
The issue will be noticeable when breakpoint animation occurs.
Code Reproduction URL
https://stackblitz.com/edit/sjtqcsqr-qifxcqcp?file=src%2Fapp%2Fexample.component.css
Ionic Info
Ionic:
Ionic CLI: 7.2.1
Ionic Framework: @ionic/angular 8.5.1
@angular-devkit/build-angular: 19.2.4
@angular-devkit/schematics: not installed
@angular/cli: 19.2.4
@ionic/angular-toolkit: 12.1.1
Utility:
cordova-res: not installed globally
native-run : not installed globally
System:
NodeJS: v20.18.1
npm: 10.8.2
OS: macOS Unknown
Additional Information
No response
Prerequisites
Ionic Framework Version
v8.5.x
Current Behavior
When using sheet modals with
expandToScroll = false, the cloned footer will not clone the stylesheets the original footer has.This is noticeable immediately with iOS stylesheets applied, as the following style from
modal.ios.scsswill not be applied to the cloned footerfooter.mov
Expected Behavior
The same styles should be applied to the cloned footer.
Steps to Reproduce
The issue will be noticeable when breakpoint animation occurs.
Code Reproduction URL
https://stackblitz.com/edit/sjtqcsqr-qifxcqcp?file=src%2Fapp%2Fexample.component.css
Ionic Info
Ionic:
Ionic CLI: 7.2.1
Ionic Framework: @ionic/angular 8.5.1
@angular-devkit/build-angular: 19.2.4
@angular-devkit/schematics: not installed
@angular/cli: 19.2.4
@ionic/angular-toolkit: 12.1.1
Utility:
cordova-res: not installed globally
native-run : not installed globally
System:
NodeJS: v20.18.1
npm: 10.8.2
OS: macOS Unknown
Additional Information
No response