Proposal: Non-scrollable page content #5987

adamdbradley · 2016-03-30T14:49:23Z

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:

[fixed-content] attribute within ion-content:

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

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>

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>

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

The text was updated successfully, but these errors were encountered:

manucorporat · 2016-03-30T14:59:04Z

@adamdbradley

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.
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 · 2016-03-30T15:00:43Z

@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 · 2016-03-30T15:25:09Z

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

We don't add more root elements -> transition code is not modified
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 · 2016-03-30T15:37:28Z

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 · 2016-03-30T15:55:48Z

@adamdbradley I like it 👍
like we said:

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

adamdbradley · 2016-03-30T16:15:52Z

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>

closes ionic-team#5987

brandyscarney · 2016-04-01T19:59:10Z

PR is merged. 👍 Will be released with beta.4! #5992

danielehrhardt · 2016-09-16T12:25:50Z

Can you add this in the Docs Please?

brandyscarney · 2016-09-16T14:47:53Z

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

MT-- · 2016-10-25T17:25:47Z

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 · 2016-10-26T02:13:14Z

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

shyamal890 · 2017-02-11T20:16:34Z

@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 · 2017-02-13T15:17:49Z

@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 · 2017-10-05T07:52:38Z

@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 · 2017-10-05T15:49:20Z

@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:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Primary Color Page Header</ion-title>
    <ion-buttons end>
      <button ion-button>S1g</button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar>
    <ion-title>{{subheader}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding fullscreen>
  <p><button ion-button class="e2eFrom3To2" (click)="navCtrl.pop()">Pop</button></p>
  <p><button ion-button (click)="pushAnother()">Push to AnotherPage</button></p>
  <p><button ion-button (click)="pushFullPage()">Push to FullPage</button></p>
  <p><button ion-button (click)="setRoot()">setRoot(AnotherPage)</button></p>
  <p><button ion-button (click)="navCtrl.popToRoot()">Pop to root</button></p>
  <p><button ion-button id="insert" (click)="insert()">Insert first page into history before this</button></p>
  <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 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>
    I'm a sub footer!
  </ion-toolbar>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-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 · 2017-10-05T16:43:03Z

@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 · 2017-10-05T17:27:06Z

@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 · 2017-10-05T17:28:37Z

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

ionitron-bot · 2018-09-01T23:48:55Z

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.

adamdbradley self-assigned this Mar 30, 2016

adamdbradley added v2 labels Mar 30, 2016

Ionitron added header labels Mar 30, 2016

jgw96 added scroll and removed animation labels Mar 30, 2016

adamdbradley assigned brandyscarney and unassigned adamdbradley Mar 30, 2016

adamdbradley added this to the 2.0.0-beta.4 milestone Mar 30, 2016

jgw96 added feature and removed question labels Mar 30, 2016

manucorporat added a commit to manucorporat/ionic that referenced this issue Mar 30, 2016

feat(ion-content): adds <ion-fixed> for non-scrollable page content

442d135

closes ionic-team#5987

manucorporat mentioned this issue Mar 30, 2016

feat(ion-content): adds <ion-fixed> for non-scrollable page content #5992

Merged

brandyscarney closed this as completed Apr 1, 2016

peterpeterparker mentioned this issue Feb 2, 2017

Fix ion-content or how to set ion-content has non scrollable (new feature or how to if already exists) #10291

Closed

brandyscarney mentioned this issue Oct 5, 2017

Feature request: allow fixed content to be above scrollable content #9071

Closed

ionitron-bot bot locked and limited conversation to collaborators Sep 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Proposal: Non-scrollable page content #5987

Proposal: Non-scrollable page content #5987

adamdbradley commented Mar 30, 2016

manucorporat commented Mar 30, 2016

manucorporat commented Mar 30, 2016

manucorporat commented Mar 30, 2016

adamdbradley commented Mar 30, 2016

manucorporat commented Mar 30, 2016

adamdbradley commented Mar 30, 2016

brandyscarney commented Apr 1, 2016

danielehrhardt commented Sep 16, 2016

brandyscarney commented Sep 16, 2016

MT-- commented Oct 25, 2016

danielehrhardt commented Oct 26, 2016

shyamal890 commented Feb 11, 2017

brandyscarney commented Feb 13, 2017 •

edited

Loading

mebibou commented Oct 5, 2017

brandyscarney commented Oct 5, 2017 •

edited

Loading

mebibou commented Oct 5, 2017

brandyscarney commented Oct 5, 2017

mebibou commented Oct 5, 2017

ionitron-bot bot commented Sep 1, 2018

Proposal: Non-scrollable page content #5987

Proposal: Non-scrollable page content #5987

Comments

adamdbradley commented Mar 30, 2016

manucorporat commented Mar 30, 2016

manucorporat commented Mar 30, 2016

manucorporat commented Mar 30, 2016

adamdbradley commented Mar 30, 2016

manucorporat commented Mar 30, 2016

adamdbradley commented Mar 30, 2016

brandyscarney commented Apr 1, 2016

danielehrhardt commented Sep 16, 2016

brandyscarney commented Sep 16, 2016

MT-- commented Oct 25, 2016

danielehrhardt commented Oct 26, 2016

shyamal890 commented Feb 11, 2017

brandyscarney commented Feb 13, 2017 • edited Loading

mebibou commented Oct 5, 2017

brandyscarney commented Oct 5, 2017 • edited Loading

mebibou commented Oct 5, 2017

brandyscarney commented Oct 5, 2017

mebibou commented Oct 5, 2017

ionitron-bot bot commented Sep 1, 2018

brandyscarney commented Feb 13, 2017 •

edited

Loading

brandyscarney commented Oct 5, 2017 •

edited

Loading