Ionic Header Fixed on Top of Page

[Pasteur Miranda]

Hi,

Below, I'm posting my question again, as it was tagged as "answered" in a previous post and it was not answered.

Hi,
I'm using AngularJs with Ionic.
I want to have a header on top of a page, but I want it not to scroll when I have, for instance, a big list in the page. In other words, I want the list to scroll(or rest of page), but I want the header fixed on the top of the page.
I placed an HTML component on page, which has the following HTML code:
<!--
<ion-header-bar align-title="center" class="bar-positive"
<div class="buttons"
<button class="button icon-left ion-chevron-left button-clear" ng-click="gotoTelaInicial()"</button
<
<h1 class="title"Requisito</h1
<div class="buttons"
<button class="button icon-left ion-checkmark-round button-clear" ng-disabled=false</button
<
</ion-header-bar
--

I set the "show header" property of this page false, in order to show only the header that was created with the HTML shown above.
Below the header, I have a list with many itens, that scrolls the page.
The html code shown above creates a header with two buttons on the top of the page. I don't want this header to scroll when the rest of the page scrolls, for instance, when you have a big list with many itens in the page. How to make this header fixed, not scrolling, that is, the page scrolls "under" it and it stays fixed on top of the page?

Thanks

[Serhii Kulibaba]

Answered here: https://getsatisfaction.com/apperyio/...

[Joe Tenga]

No. His question wasn't answered by that post. I tried the poster's code and obtained the same behavior Pasteur described. If you made it work can you please describe what you changed to make it work?

[Serhii Kulibaba]

Hello Joe,

Please clarify, do you use a default header of the Ionic Visual builder? It is fixed by default

[Joe Tenga]

Yes, I do use the default header of the Ionic Visual builder, but it is limited in what can be placed inside it.

So I tried using a Position: Fixed and then Position: Absolute with a variety of components such as Grid, Label, etc Regardless of the component, they all scroll off the page. Even when I turn off Page Headers.

I then tried the HTML component Pasteur described with the same results.

Regardless of what i have tried in the past, can Appery provide guidance based on something they have actually tested. I have received feedback in the past regarding how CSS should work in theory, but it never works as described.

[Serhii Kulibaba]

Unfortunately this is something outside the scope of standard Appery.io platform support. You may consider purchasing Advisory Pack to get more in-depth help on this question. Here is more information about Advisory Pack (http://appery.io/services/#Advisory_Pack).

[Joe Tenga]

I completely disagree that this warrants an Advisory Pack as this is neither a specialized development item nor an excessive request.

Fixed and/or Absolute CSS positioning of an HTML element is a CORE capability and absolutely essential in any mobile app. It is keeping me from delivering a professional looking app.

This is a significant bug that deserves attention now.

An acceptable alternative would be for Ionic Sub-Headers to be supported. Has that changed?

[Serhii Kulibaba]

This is common CSS rule, which you can find online.

E.g. create a component HTML with a div with the custom class "mydiv"
and use the CSS below:

pre&#46;mydiv{
position:absolute;
background:red;
z-index: 100;
width: 100%;
text-align: center;
}/pre

[Joe Tenga]

Finally coming back around to this topic.

Not surprisingly, Serhii's code didn't work as advertised. As I indicated in my earlier post, I too tried the "common CSS rule which could be found online". But like both me and Pasteur the original poster indicated, those solutions just wouldn't work. The problem seems to be that everything in an ion-content section scrolls, even when told to be fixed.

Before responding to this post with any further theoretical "this should work" statements, could you please prove your solution out in your own Ionic test app???

Your test page should have the following:

-A HEADER
-SOME TEXT THAT I DONT WANT TO MOVE OFF THE PAGE (basically a Sub header that stays fixed under the header)
-SCROLLABLE CONTENT (ng-repeat)

Thank you for revisiting this. I am finally about ready to release my app, and not being able to fix a div at the top of a scrolling list is a bit of an embarrassment for me.