Ionic-framework: Feature request: allow fixed content to be above scrollable content

[movrack]

Short description of the problem:

When I use ion-fixed attribut in ion-content it fixed the content but it's overlaped with the following element and start at the same position below the ion-header

What behavior are you expecting?

• no overlaps
• non-fixed div (or other tag) start at right position. (size of header + size of fixed div (or other tag))
• width size of fixed element is 100%
• doc not yet documented (https://github.com/driftyco/ionic-site/issues/776#issuecomment-258487040)

points 2 and 3 depends on elements. Here it'ss the case for a div, the div, should stay a div.

• in case of scroll, the scrollable part should pass under the fixed element.

<ion-header>
    // navbar
</ion-header>
<ion-content>
    <div ion-fixed>
        fixed element, smallest possible square in top left, must take full width available.
    <div/>
    <div>
        non fixed overlaps fixed
    </div>
<ion-content>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

To fix it, i use the trick of danielmm in https://forum.ionicframework.com/t/scroll-false-in-ionic-2/64571/12?u=mse . This should be more automated.

Which Ionic Version? 1.x or 2.x
ionic 2 RC1

Plunker that shows an example of your issue

http://plnkr.co/edit/QOR7U3Q8yq2VjGwhIjTB?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Windows 8.1
Node Version: v5.0.0

[manucorporat]

Well, that's not the expected behavior at all.

Fixed and scrollable elements does not share the same layout, so they can't affect each others.

Also, ion-fixed does not have to be at the top left, it can be at any position. For example bottom right:
botom: 0px; right:0px.

[movrack]

I am not telling it should be at top left.
I tell a div should stay a div. Supposed to default behavier: all with space available. Not the smallest space. And next element don't overlap it.
Actually I need to force width 100% to keep normal div size. And I need to push down the scrollable part to avoid overlaps with a margin-top of ion-fixed size.

If you put this (my) ion-fixed after the scrollable part, The behaviour will stay the same. as it's before but in the down part of the screen.

I can understand which behaviour you tell. Like fab-button who stay up even if screen is scrolled.
If ion-fixed must stay like that. I will create a new feature request.
"I'd like part non scrollable, non overlaped in ion content has ion-header/ion-footer inside ion-content who don't change tag property like witdth".

And I suppose you will tell me "you can put your fixed cotent code in ion-header or ion-footer.
I reply:
no:

* animation of page push/bask is not the same, an make bugs in our case. (superposed lines beacause header/footer don't have the same size) 
* how i do page with zone like:

- header
- fixed
- scroll
- fixed
- scroll
- fixed
- footer

[movrack]

Here an other plunkr to show expected behaviour.

http://plnkr.co/edit/15TMtAwE6eBYAzJTL3Gp?p=preview

[nissimpradhan]

I have the exact same issue, Using danielmm trick is a hack. I followed all the links in this post as well as searched on other posts. It seems like it should function properly out of the box, but it doesn't. Did you find a better way to fix it?

[mebibou]

I've had to create a component to fix this, but it's not perfect:

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: '[ion-fixed]',
  template: `
    <style>
      :host { width: 100%; }
    </style>
    <ng-content></ng-content>
  `
})
export class IonFixedComponent {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    setTimeout(() => {
      this.resizeScrollContent();
    }, 500);
  }

  private resizeScrollContent() {
    const fixedHeight = this.el.nativeElement.offsetHeight;
    const fixedContent = this.el.nativeElement.parentElement;
    const scrollContent = fixedContent.nextElementSibling;

    scrollContent.style.marginTop = `${parseInt(scrollContent.style.marginTop, 10) + fixedHeight}px`;
  }
}

[brandyscarney]

Reopening as a feature request, see my comment here: https://github.com/ionic-team/ionic/issues/5987#issuecomment-334535033

[thsbrown]

Would really love to see this feature in place as well.

Edit

Here is another solution I hacked up given some help from others examples

  @ViewChild('fixedContentContainer') fixedContentContainer: ElementRef;
  @ViewChild(Content) content: Content;

  ionViewDidEnter() {
    let fixedContainer = this.fixedContentContainer.nativeElement;

    // Get the height of the fixed item
    let itemHeight = fixedContainer.offsetHeight;
    let scroll = this.content.getScrollElement();

    //add preexisting scroll margin to fixed container size
    itemHeight = Number.parseFloat(scroll.style.marginTop.replace("px","")) + itemHeight;
    scroll.style.marginTop = itemHeight + 'px';
  }

[KesselringWebmaster]

@Spartanace1024 Thomas! I applied your solution and on the template I set
<div class="profile-control" #fixedContentContainer ion-fixed>
and it made the trick. Thank you mate!

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/138