Conditional header


Is is possible to make an div with an input field that reside in the content pane act as a header when the input field recieves focus?


You can use ng-focus and ng-blur


I want the div with the input to act as a header, not just another div? Is this possible?


What would happen to the existing header when the input has focus?
How does the user go back to the initial header+content (on blur)?

I think I have a rough image in my head of what you’re describing, but this kind of UI seems a bit confusing for the user.


I needs to be refined a bit but it works like this now.

Clicking the search icon will show the input and moving away from the input will hide the search bar


I want it to act as a header in one instance, where I want to be able to scroll the content while having a fixed header and in the next instance I want the “header div” to scroll with the content


Maybe you can set the header-bar as default and in your states or cases the headerbar should scroll with the content you could hide the headerbar and put a ionic pane as first element in the ion-content.

Add an ng-show on the headerbar and the negation of the condition to the pane.


@crissi I get what you mean.

How does this work for you?


Thx man, this I what I needed:)