Closed adamdbradley closed 8 years ago
@adamdbradley
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>
@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
More thoughts about why I think a nested solution is the best option:
Powerful:
<ion-content fixed>
<ion-content>scrollable</ion-content>
<ion-content fixed>no scrollable</ion-content>
</ion-content>
<ion-content fixed>
<ion-content>scrollable</ion-content>
<div style="position:absolute; top:0px">HUD</ion-content>
</ion-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>
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?
@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
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:
PR is merged. :+1: Will be released with beta.4! https://github.com/driftyco/ionic/pull/5992
Can you add this in the Docs Please?
@danielehrhardt Issue created for docs to get added: https://github.com/driftyco/ionic-site/issues/776
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?
@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
@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! :)
@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"?
@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:
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!
@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
@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
@brandyscarney yep that's the idea, something that would be automatic, cf #9071
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.
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
andion-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 withinion-content
:2)
ion-fixed-content
element as a sibling toion-content
:3) Allow multiple
ion-content
elements, and add an attribute to the content element that shouldn't be scrollable:4) Always use
ion-header
orion-footer
for these scenarios, even if the content doesn't actually visually look like a footer:Thoughts? @brandyscarney