Hi,
Request some guidance on how to include a common footer template (say the copyright footer) across the app.
I tried a few things like ion-toolbar, multiple ion-nav with appropriate “content” name etc. but nothing worked so far.
Thanks in advance.
Mohan B.
Bangalore, India.
Hi @mohanb02, you were on the right track. You should use the ion-toolbar for that. Check out the example in the docs here.
By telling the toolbar directive to position at the bottom, it will stick there like a footer:
<ion-toolbar position="bottom">
<ion-title>Footer</ion-title>
</ion-toolbar>thanks a lot luukschoen!
But when i try that, the tool bar is showing up in the top and also the menu icon is lost!
I have attached the screen shot for the app.html code below:
<ion-menu side=“right” [content]=“content”>
<ion-nav id=“nav-main” [root]=“rootPage” #content swipe-back-enabled=“false”>
Footer share us your source code
Hm that’s a weird one. Could you set up a codepen to show us your problem? If I try the following code in a blank page, everything happens as expected;
<ion-navbar *navbar>
<ion-title>something</ion-title>
</ion-navbar>
<ion-content padding>
</ion-content>
<ion-toolbar position="bottom">
asfasf
</ion-toolbar>
This does everything as I would expect. You aren’t getting any errors?
thanks both of you, @icarus_31 & @luukschoen!!
i will just know how to set up codepen and do the same and update you shortly.
Regards,
Mohan B.
hi @luukschoen, @icarus_31
I have just set up the 2 files viz. app.html & app.ts through http://codepen.io/mohanb02/pen/pywLgo.
Haven’t set up the other dependent files. will this still let you take a look at the files and suggest some approach or should i do something better in codepen? Let me know.
Thanks,
Mohan B.
The codepen does not seem to work.
By the way, have you tried to toolbar alone with a regular “ion-content” just to see that it is working?
Maybe just use a footer and color it with the colors the Ionic uses?
@icarus_31:
Thanks! yes. if the footer is injected into a specific template it works, but i am looking at using it in a place so that the footer need not be injected in every template! I felt that should be feasible, but not able to get it right :).
@bandito:
thanks! will this be a common footer injection across templates?
Ahhh so you want one global defined toolbar at the bottom… 'Just like putting it in the index.html in Ionic 1, a global footer. I guess that isn’t working (for now). Most logical place would be in app.html, but then (as you experienced) it won’t obey the position=“bottom”. I don’t know if it’s by design or just a bug or feature not yet implemented, but you’re absolutely right.
I suggest you make 1 footer component and add all the html you need for the footer in that template. Inject the small piece of directive html into every template where you need your footer… I know it isn’t exactly the DRY solution you’re looking for, but at least it solves your problem and keeps the code you need to change if you wan’t to change your footer to a minimum.
thanks a lot @luukschoen. I will give your idea a shot :).
Just make it a directive. Look at Angular docs on how to do that.
Thanks a lot @bandito!.
i shall be trying this shortly and update back.
Did you have any progress with this? I am also looking to define a common footer and then include it into multiple page components.
Is there a solution for this yet? I haven’t tried using a common footer in app.html yet, and it’s been a while…
yes you just create a custom component, add a ion-footer at the bottom of each page you want it on and include your custom component. This keeps all your footer code in the custom component.
Yeah, I got it to work shortly after posting here.
I did something even simpler, which was to include the footer in app.html and its component code in app.component.ts. Only hiccup was that I had to create an app.component.scss file in the same directory to get the CSS to work, global.scss does not seem to work, as noted elsewhere in this forum… otherwise, it works great!
Marc
Can you give us and example how to do it. Thanks in advance!
Just tried this in Ionic 4 and same problem as posted here. Footer overwrites the header. Disappointing.