Is here any tool to stick elements at the top?

1

And that’s my question “is here any tool to stick elements at the top ?”, regarding Ionic of course, if there is not, what do you recommend ?

2

Hey,

It really depends what you’re asking. The question is a little vague.

You can use css to do it

.absoluteMethod {
    position: absolute;
    top: 0;
}

.fixedMethod {
    position: fixed;
    top: 0;
}

But is there something more specific you’re trying to do?

3

I need to stick a search bar at the top. Let me try this

4

Hey,

You can do that by putting the ion-nav-title directive in your ion-view and adding a search textbox in it.

<ion-nav-title>

    <div class="bar bar-header item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios7-search placeholder-icon"></i>
            <input type="search" placeholder="Search">
        </label>
        <button class="button button-clear">
            Cancel
        </button>
    </div>
</ion-nav-title>

You should also check out this site http://ionicframework.com/docs/components, it may help a bit

5

actually using this, my search bar disappears

6

Hey,

If you post up the code that you’re seeing the error on, it’ll be easier for me.

I got the above code from mine that was working

7

I have it working now bro, but it is not what I want. It is ok because the search is on top and sticky, but is over the header and is removing a text that I have put on my header. I need something that stick my element just below the header and not over the header

8

Hey,

Gotcha, thats easier, put the div thats in the ion-nav-title as the first element in you ion-content

9

sorry I did not get you.

    <ion-content class="has-footer" has-footer="true">
    
      CONTENT

    </ion-content>

and this is the code I want to be sticky

    <label class="item item-input" style="background:red;">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="text" placeholder="Sports finder"
             ng-model="query">
    </label>
10

Hey,

You need the div, the classes on the div are what put it at the top of the page properly

<ion-content>
    <div class="bar bar-header item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios7-search placeholder-icon"></i>
            <input type="search" placeholder="Sports finder">
        </label>
        <button class="button button-clear">
            Cancel
        </button>
    </div>

.........
11

now I have it likes this then:

<div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input type="search" placeholder="Sports finder">
    </label>
    <button class="button button-clear">
        Cancel
    </button>
</div>
..........

and still not working

12

Hey,

That is really wierd. Not sure what else to suggest. @mhartington or @brandyshea might have a better suggestion for you.

2 Likes
13

Try using a subheader: http://codepen.io/anon/pen/DLuEc

If you want the search only on one view, place it before the ion-content but after the ion-view. So it should be:

<ion-view>
    <ion-header-bar class="bar-light bar-subheader">
        <!-- content of the header -->
    </ion-header-bar>
    <ion-content>
        <!-- content of view -->
    </ion-content>
</ion-view>
3 Likes
14

THANKS AGAIN :smile:

1 Like
15

hey @brandyshea thoughts on how to make this stick to the bottom of the page instead of the top? same behavior that content scrolls behind it.

I tried ion-footer-bar but this gets pushed all the way to the bottom of the content, doesn’t stick to the view.
Tried some css sticky footer but no bueno: Fixed Footer | CSS-Tricks - CSS-Tricks

Thanks in advance!
-Sante

16

Hey, I’m not sure what you mean by “this gets pushed all the way to the bottom of the content, doesn’t stick to the view.” The ion-footer-bar does allow the content to scroll behind it, but once you get to the end of the content it sits underneath it. Could you give me some more details so I could better understand your use case? I threw together a Codepen of the footer-bar: http://codepen.io/brandyshea/pen/ZGvjeR?editors=101

17

Hey @brandyshea when I put a footer after an ion-list that extended past the end of the viewport the footer got pushed to the bottom and wasn’t viewable until I scrolled all the way down. Your codepen is definitely the functionality I’m looking for. I’ll see if I can replicate mine, but its great to see it working! Thanks!

18

Make sure the ion-footer-bar is after the ion-content tag. I updated the Codepen to add a list in the content. :smile:

19

Aha, after ion-content is clutch! Thanks @brandyshea, you da best!

1 Like
20

hi ,

regarding the same issue…
there is an option to make element that inside the ion-content to be “sticky” ?