javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(content): add a new variable for calculating fixed content top/bottom

Browse Source 
This is to fix the fixed content getting the same padding from
ion-content applied when fullscreen. It should not get padding.
This commit is contained in:
Brandy Carney
2016-12-07 11:36:57 -05:00
parent d53a38e479
commit 8037086650
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/content/content.ts
View File

@ -146,6 +146,10 @@ export class Content extends Ion implements OnDestroy, OnInit {
/** @internal */
_tTop: number;
/** @internal */
_fTop: number;
/** @internal */
_fBottom: number;
/** @internal */
_inputPolling: boolean = false;
/** @internal */
_scroll: ScrollView;
@ -569,6 +573,8 @@ export class Content extends Ion implements OnDestroy, OnInit {
this._ftrHeight = 0;
this._tabsPlacement = null;
this._tTop = 0;
this._fTop = 0;
this._fBottom = 0;
let ele: HTMLElement = this._elementRef.nativeElement;
if (!ele) {
@ -646,6 +652,10 @@ export class Content extends Ion implements OnDestroy, OnInit {
this._cBottom += this._tabbarHeight;
}
// Fixed content shouldn't include content padding
this._fTop = this._cTop;
this._fBottom = this._cBottom;
// Handle fullscreen viewport (padding vs margin)
if (this._fullscreen) {
this._cTop += this._pTop;
@ -706,8 +716,8 @@ export class Content extends Ion implements OnDestroy, OnInit {
// Handle fullscreen viewport (padding vs margin)
let topProperty = 'marginTop';
let bottomProperty = 'marginBottom';
let fixedTop: number = this._cTop;
let fixedBottom: number = this._cBottom;
let fixedTop: number = this._fTop;
let fixedBottom: number = this._fBottom;
if (this._fullscreen) {
assert(this._pTop >= 0, '_paddingTop has to be positive');

4
src/components/nav/test/basic/app-module.ts
View File

@ -387,8 +387,8 @@ export class FullPage {
<p><button ion-button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
<div class="yellow"><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div><div f></div></div>
<button ion-button ion-fixed (click)="presentAlert()">fixed button (alert)</button>
<div ion-fixed style="position: absolute; pointer-events: none; top:10px; bottom:10px; right:10px; width:50%; background: rgba(0,0,0,0.5);"></div>
<button ion-button ion-fixed no-margin color="danger" (click)="presentAlert()">fixed button (alert)</button>
<div ion-fixed style="position: absolute; pointer-events: none; top:0; bottom:0; right:0; width:50%; background: rgba(0,0,0,0.5);"></div>
</ion-content>
<ion-footer>
<ion-toolbar no-border-bottom>