diff --git a/packages/core/src/components/app/app.scss b/packages/core/src/components/app/app.scss index 5e44896af1..4c9b0432b3 100644 --- a/packages/core/src/components/app/app.scss +++ b/packages/core/src/components/app/app.scss @@ -165,12 +165,20 @@ ion-app { // Page Container Structure // -------------------------------------------------- -.ion-page, -.page-inner { +.ion-page { + @include position(0); + + position: absolute; + z-index: $z-index-page-container; display: flex; flex-direction: column; justify-content: space-between; + + width: 100%; + height: 100%; + + contain: layout size style; } .hide-page { diff --git a/packages/core/src/components/content/readme.md b/packages/core/src/components/content/readme.md index 00d971a8d2..3c4622cd0d 100644 --- a/packages/core/src/components/content/readme.md +++ b/packages/core/src/components/content/readme.md @@ -20,6 +20,10 @@ view component. boolean +If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. +If the content exceeds the bounds of ionContent, nothing will change. +Note, the does not disable the system bounce on iOS. That is an OS level setting. + #### fullscreen @@ -36,6 +40,10 @@ to transparent. boolean +If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. +If the content exceeds the bounds of ionContent, nothing will change. +Note, the does not disable the system bounce on iOS. That is an OS level setting. + #### fullscreen diff --git a/packages/core/src/components/infinite-scroll-content/readme.md b/packages/core/src/components/infinite-scroll-content/readme.md index c14de472d4..8f79c554f0 100644 --- a/packages/core/src/components/infinite-scroll-content/readme.md +++ b/packages/core/src/components/infinite-scroll-content/readme.md @@ -16,6 +16,7 @@ You can loading icon or loading text with the component's properties. + ## Properties #### loadingSpinner @@ -24,12 +25,14 @@ string An animated SVG spinner that shows while loading. + #### loadingText string Optional text to display while loading. + ## Attributes #### loading-spinner @@ -38,12 +41,15 @@ string An animated SVG spinner that shows while loading. + #### loading-text string Optional text to display while loading. ---- -_Built with [StencilJS](https://stenciljs.com/)_ + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/menu/menu.scss b/packages/core/src/components/menu/menu.scss index a2609acabb..8c90b1f93e 100644 --- a/packages/core/src/components/menu/menu.scss +++ b/packages/core/src/components/menu/menu.scss @@ -24,7 +24,10 @@ ion-menu.show-menu { position: absolute; - display: block; + display: flex; + + flex-direction: column; + justify-content: space-between; width: $menu-width; height: 100%; diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index 9fd137657c..250811e229 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -444,7 +444,7 @@ export class Menu { render() { return ([ -
this.menuInnerEl = el}> +
this.menuInnerEl = el}>
, @@ -468,7 +468,7 @@ export class Menu { 'type': 'pan', 'direction': 'x', 'threshold': 10, - 'attachTo': 'body', + 'attachTo': 'window', 'disableScroll': true, 'block': this.gestureBlocker }}/> diff --git a/packages/core/src/components/nav/nav.scss b/packages/core/src/components/nav/nav.scss index e1a35ce1b7..4bdc326f49 100644 --- a/packages/core/src/components/nav/nav.scss +++ b/packages/core/src/components/nav/nav.scss @@ -15,19 +15,6 @@ ion-nav { contain: layout size style; } -.ion-page { - @include position(0); - - position: absolute; - - z-index: $z-index-page-container; - - width: 100%; - height: 100%; - - contain: layout size style; -} - .nav-decor { display: none; } diff --git a/packages/core/src/components/page/page.scss b/packages/core/src/components/page/page.scss deleted file mode 100644 index 09471d83bf..0000000000 --- a/packages/core/src/components/page/page.scss +++ /dev/null @@ -1,18 +0,0 @@ -// Util -// -------------------------------------------------- -@import "../../themes/util"; - - -ion-page { - @include position(0); - - position: absolute; - - z-index: $z-index-page-container; - - width: 100%; - height: 100%; - - contain: layout size style; -} - diff --git a/packages/core/src/components/page/page.tsx b/packages/core/src/components/page/page.tsx index b29c2413d6..a16198e15e 100644 --- a/packages/core/src/components/page/page.tsx +++ b/packages/core/src/components/page/page.tsx @@ -3,7 +3,6 @@ import { Component } from '@stencil/core'; @Component({ tag: 'ion-page', - styleUrl: 'page.scss' }) export class Page { diff --git a/packages/core/src/components/scroll/readme.md b/packages/core/src/components/scroll/readme.md index 18fdb29a40..e196cabee1 100644 --- a/packages/core/src/components/scroll/readme.md +++ b/packages/core/src/components/scroll/readme.md @@ -11,6 +11,10 @@ boolean +If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. +If the content exceeds the bounds of ionScroll, nothing will change. +Note, the does not disable the system bounce on iOS. That is an OS level setting. + #### mode @@ -38,6 +42,10 @@ string boolean +If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. +If the content exceeds the bounds of ionScroll, nothing will change. +Note, the does not disable the system bounce on iOS. That is an OS level setting. + #### mode diff --git a/packages/core/src/components/tabbar/tabbar.tsx b/packages/core/src/components/tabbar/tabbar.tsx index 9714f8dbb8..e15b881a52 100644 --- a/packages/core/src/components/tabbar/tabbar.tsx +++ b/packages/core/src/components/tabbar/tabbar.tsx @@ -184,7 +184,7 @@ export class Tabbar { , - this.scrollEl = scrollEl}> + this.scrollEl = scrollEl}> {tabButtons} {ionTabbarHighlight} ,