Proposal: Non-scrollable page content

[adamdbradley]

By default, ion-content is the scrollable area, and it's the element which is grabbed by transition animations when transitioning between pages.

However, some content within pages should not be scrollable. For example an app could have a fixed div that needs to hover over the entire page, but it shouldn't be scrollable. ion-header and ion-footer for the most part are for fixed content (however, they do not work yet with transitions).

Right now there's no clean way to also have fixed content transition with the page.

How should users add fixed content to pages?

A few ideas:

1) [fixed-content] attribute within ion-content:

<ion-navbar/>
<ion-content>
  scrollable content
  <div fixed-content>fixed</div>
</ion-content>

2) ion-fixed-content element as a sibling to ion-content:

<ion-navbar/>
<ion-content>
  scrollable content
</ion-content>
<ion-fixed-content>fixed</ion-fixed-content>

3) Allow multiple ion-content elements, and add an attribute to the content element that shouldn't be scrollable:

<ion-navbar/>
<ion-content>
  scrollable content
</ion-content>
<ion-content scrollable="false">fixed</ion-content>

4) Always use ion-header or ion-footer for these scenarios, even if the content doesn't actually visually look like a footer:

<ion-navbar/>
<ion-content>
  scrollable content
</ion-content>
<ion-footer>fixed</ion-footer>

Thoughts? @brandyscarney

[manucorporat]

@adamdbradley

1. I think adding more root elements like ion-content, ion-footer, ion-header or ion-fixed-content. is error prone, and inflexible. It will require changes in more places, like transitions.
2. ion-footer and ion-header are very specific use cases. For example, how about if I want something that covers the whole screen? or it is in the middle (no header or footer). or it is absolute positioned.

I propose a nested <ion-content>, so it would not break existing transitions and gives a lot of flexibility.

<ion-content fixed>
    <ion-content> scrollable</ion-content>
    <div style="position:absolute; bottom: 10px>Fixed HUD</div>
</ion-content>

[manucorporat]

@adamdbradley

Allow multiple ion-content elements, and add an attribute to the content element that shouldn't be scrollable:

I think having several ion-content at the root level, also makes the transitions more complicated. Because we would have to iterate and animate all the ion-contents in the ion-page. does it make sense?

And since they are independent animations, the browser would keep them in different layers, affecting the performance

[manucorporat]

More thoughts about why I think a nested solution is the best option:

1. We don't add more root elements -> transition code is not modified

2. Powerful:

   • I want two ion-contents ( evenly divided) first one scrollable, second one fixed:

   <ion-content fixed> 
   <ion-content>scrollable</ion-content>
   <ion-content fixed>no scrollable</ion-content>
   </ion-content>

   • I want one HUD that covers the entire content (without covering the navbar!!!)

   <ion-content fixed> 
   <ion-content>scrollable</ion-content>
   <div style="position:absolute; top:0px">HUD</ion-content>
   </ion-content>

   • Something fixed at the button that DOES NOT cover the content:

   <ion-content fixed> 
   <ion-content>scrollable</ion-content>
   <ion-list style="margin:0">
     <ion-item>
         <ion-input placeholder="Write a message..."></ion-input>
     </ion-item>
   </ion-list>
   </ion-content>

[adamdbradley]

I think we have agreed it needs to be nested within ion-content, otherwise absolutely position items wouldn't fit within the content area, but they would go over headers and footers. We're leaning toward something like this:

<ion-navbar/>
<ion-content>
  scrollable content
  <ion-content-fixed>fixed</ion-content-fixed>
</ion-content>

Thoughts?

[manucorporat]

@adamdbradley I like it :+1: like we said:

ion-header: static position on top ion-footer: static position on bottom ion-content-fixed: absolute position

[adamdbradley]

Going to go with <ion-fixed> so it's more of a generic element:

<ion-navbar/>
<ion-content>
  scrollable content
  <ion-fixed>fixed</ion-fixed>
</ion-content>

:shipit:

[brandyscarney]

PR is merged. :+1: Will be released with beta.4! https://github.com/driftyco/ionic/pull/5992

[danielehrhardt]

Can you add this in the Docs Please?

[brandyscarney]

@danielehrhardt Issue created for docs to get added: https://github.com/driftyco/ionic-site/issues/776

[MT--]

Using RC1, this component is non-existent. There is, however, and [ion-fixed] attribute selector available that I can add to a child of <ion-content>. Looking at the compiled code for the Content class in ionic-angular shows <ng-content select="[ion-fixed],ion-fab"> in the "template" property.

Did this get removed?

[danielehrhardt]

https://forum.ionicframework.com/t/scroll-false-in-ionic-2/64571/12

[shyamal890]

@jgw96 may be it is time to reopen this issue since there is no solution to this. Moveover, there is no reference to ion-fixed in docs

[brandyscarney]

@shyamal890 Please see my comment here: https://github.com/driftyco/ionic-site/issues/776#issuecomment-258487040

This feature exists so there is no action for us to take on the framework. That issue on the ionic-site repository is open for us to document it better. If there is additional functionality you'd like this feature to have please create a new issue for it. Thanks! :)

[mebibou]

@brandyscarney the example in the link you gave points to nothing, the link is broken, could you show what piece of code gives the result in the screenshot?

Personally I tried the following setup:

<ion-content>
  <div ion-fixed>Fixed content<div>
  <div>Not fixed</div>
</ion-content>

And the "Fixed content" text appears on top of "Not fixed". I saw in issue #9071 that someone suggest hacking it to set the height manually so that the div not fixed would appear below. If that is the case and everyone has to add some code to make this work, how can you call this "a feature"?

[brandyscarney]

@mebibou I updated the link in my comment to point to the correct file. Added the code to the details below (click to expand them) in case the link breaks in the future:

``` Primary Color Page Header S1g {{subheader}}

Pop

Push to AnotherPage

Push to FullPage

setRoot(AnotherPage)

Pop to root

Insert first page into history before this

Remove second page in history

fixed button (alert)

I'm a sub footer! Footer ```

When you place elements in an ion-content they automatically go into a scrollable div, so the following:

<ion-content>
  <div>Not fixed</div>
  <div>Fixed</div>
</ion-content>

Would render as:

<ion-content>
  <div class="scroll-content">
    <div>Not fixed</div>
    <div>Fixed</div>
  </div>
</ion-content>

But when you add the ion-fixed the content goes into a separate div that is a sibling of the scrollable div:

<ion-content>
  <div ion-fixed>Fixed</div>
  <div>Not fixed</div>
</ion-content>

becomes:

<ion-content>
  <div class="fixed-content">
    <div>Fixed</div>
  </div>
  <div class="scroll-content">
    <div>Not fixed</div>
  </div>
</ion-content>

The fixed-content class gets the following styles:

.fixed-content {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: block;
}

and it takes on the same amount of margin for the header/footer as the content so it is still "in" the content, just not the scrollable section. This was our intention with the attribute, to have a separate "content" section that doesn't scroll with the other content.

I'm not sure I entirely understand what you're expecting the attribute to do. Do you have any pictures of what it is doing vs what you're expecting? Thanks!

[mebibou]

@brandyscarney hum I guess like most people I did not understand what ion-fixed was for, and maybe what we want to do does not exists. Here's an example: if I add ion-fixed to the first ion-item, it will simply appear on top of the list. What I want to do is have the scrollable content start after the fixed elements, so the ion-list should stay alone in the scrollable content

[brandyscarney]

@mebibou ion-fixed is really just a way to have elements placed outside of the scrollable content. Our main use case for it was for fab buttons so that people could have them on top of their content and over headers if desired.

You can still use it to achieve what you want with your example. I updated it to add some margin-top to the list so it will be after the first item: http://plnkr.co/edit/EN3YrkFkD63NZyVkYEN3?p=preview

It would be better if we could add the height of the fixed-content to the margin-top of the scroll-content. This would require us to know that you want the fixed content above, not over, the scroll content though. Maybe this is something we could add as an option to how ion-fixed works. cc @manucorporat

[mebibou]

@brandyscarney yep that's the idea, something that would be automatic, cf #9071

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.