Styjun

Ticket to ride, 1910: What are the big cities

Is the Indo-European language family made up?

Plot twist where the antagonist wins

Count rotary dial pulses in a phone number (including letters)

Can I install both XCode & Android Studio on MacBook Air with only 8 GB of Ram

Why do Ryanair allow me to book connecting itineraries through a third party, but not through their own website?

Is real public IP Address hidden when using a system wide proxy in Windows 10?

Why do they consider the Ori false gods?

Crossing US border with music files I'm legally allowed to possess

What kind of metaphor is "trees in the wind"?

Pirate democracy at its finest

Is the field of q-series 'dead'?

How to respond to an upset student?

Is the Starlink array really visible from Earth?

I unknowingly submitted plagarised work

If a person had control of every single cell of their body, would they be able to transform into another creature?

At what point in European history could a government build a printing press given a basic description?

What was the idiom for something that we take without a doubt?

Why doesn't the Earth accelerate towards the Moon?

What are the real benefits of using Salesforce DX?

Why does Mjolnir fall down in Age of Ultron but not in Endgame?

Why does this if-statement combining assignment and an equality check return true?

Is neural networks training done one-by-one?

How should I introduce map drawing to my players?

Sticky footer is moving along with screen while scrolling in ionic2+bootstrap4

“Extend” webpages to fit a sticky footerwebkit sticky footer menuBootstrap sticky footer + sticky bar on topFooter not stickingHow to hide fixed DIV when footer is visible on screen?Toggle Sidebar with sticky header and footerFull screen background slideshow messing up responsive sticky footerSticky footer when Page is larger than screen heightSticky footer bootstrap 4Bootstrap 4.1.1 footer center alignment with right border

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

i am using ionic2 with bootstrap to make PWA. I had used "My Ionic Material Design" theme.

I am facing problem to implement Sticky footer. I had tried with bootstrap code but problem is the Sticky footer moving along with screen. How can i Fix it always in bottom of screen. Anyone Please Help.

.footer 
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: red;
 color: white;
 text-align: center;
 

 <div class=" bar footer bar-footer">
 <p>Bootstrap Footer</p>
 </div>

I'm using this code with "My Ionic Material Design" theme. but its had not fixed. problem is the 'Sticky footer' moving along with screen while scrolling.

javascript angular css3 ionic-framework bootstrap-4

share|improve this question

edited Mar 25 at 8:05

georgeawg

36.6k115471

asked Mar 24 at 5:53

Akash RajAkash Raj

162

add a comment | 

1

i am using ionic2 with bootstrap to make PWA. I had used "My Ionic Material Design" theme.

I am facing problem to implement Sticky footer. I had tried with bootstrap code but problem is the Sticky footer moving along with screen. How can i Fix it always in bottom of screen. Anyone Please Help.

.footer 
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: red;
 color: white;
 text-align: center;
 

 <div class=" bar footer bar-footer">
 <p>Bootstrap Footer</p>
 </div>

I'm using this code with "My Ionic Material Design" theme. but its had not fixed. problem is the 'Sticky footer' moving along with screen while scrolling.

javascript angular css3 ionic-framework bootstrap-4

share|improve this question

edited Mar 25 at 8:05

georgeawg

36.6k115471

asked Mar 24 at 5:53

Akash RajAkash Raj

162

add a comment | 

i am using ionic2 with bootstrap to make PWA. I had used "My Ionic Material Design" theme.

I am facing problem to implement Sticky footer. I had tried with bootstrap code but problem is the Sticky footer moving along with screen. How can i Fix it always in bottom of screen. Anyone Please Help.

.footer 
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: red;
 color: white;
 text-align: center;
 

 <div class=" bar footer bar-footer">
 <p>Bootstrap Footer</p>
 </div>

I'm using this code with "My Ionic Material Design" theme. but its had not fixed. problem is the 'Sticky footer' moving along with screen while scrolling.

javascript angular css3 ionic-framework bootstrap-4

share|improve this question

edited Mar 25 at 8:05

georgeawg

36.6k115471

asked Mar 24 at 5:53

Akash RajAkash Raj

162

.footer 
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: red;
 color: white;
 text-align: center;
 

 <div class=" bar footer bar-footer">
 <p>Bootstrap Footer</p>
 </div>

.footer 
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: red;
 color: white;
 text-align: center;
 

 <div class=" bar footer bar-footer">
 <p>Bootstrap Footer</p>
 </div>

.footer 
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: red;
 color: white;
 text-align: center;
 

 <div class=" bar footer bar-footer">
 <p>Bootstrap Footer</p>
 </div>

javascript angular css3 ionic-framework bootstrap-4

javascript angular css3 ionic-framework bootstrap-4

share|improve this question

edited Mar 25 at 8:05

georgeawg

36.6k115471

asked Mar 24 at 5:53

Akash RajAkash Raj

162

share|improve this question

edited Mar 25 at 8:05

georgeawg

36.6k115471

asked Mar 24 at 5:53

Akash RajAkash Raj

162

edited Mar 25 at 8:05

georgeawg

36.6k115471

edited Mar 25 at 8:05

georgeawg

36.6k115471

asked Mar 24 at 5:53

Akash RajAkash Raj

162

asked Mar 24 at 5:53

Akash RajAkash Raj

162

1 Answer
1

active

oldest

votes

0

If you want to use footer the you can use the ion-footer tag which is given in the ionic. The ion-content has scroll and if you apply styles for footer the footer will not be in the fixed position. so better use the ion-footer

<ion-footer>
 <ion-toolbar>
 <ion-title>Footer</ion-title>
 </ion-toolbar>
</ion-footer>

Refer ionic documentation Footer

share|improve this answer

answered Mar 24 at 6:22

SivaramakrishnanSivaramakrishnan

4761110

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for suggestions. I tried with suggested code but footer is not sticking on screen it's always coming in bottom. I want to Create sticky footer.
  
  – Akash Raj
  Mar 25 at 6:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please suggest any other idea to fix it. Screenshot: drive.google.com/file/d/1qeYrwzHshn1sqz3jQGmn8X_hINOLMgLz/…
  
  – Akash Raj
  Mar 25 at 6:51
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55321098%2fsticky-footer-is-moving-along-with-screen-while-scrolling-in-ionic2bootstrap4%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

If you want to use footer the you can use the ion-footer tag which is given in the ionic. The ion-content has scroll and if you apply styles for footer the footer will not be in the fixed position. so better use the ion-footer

<ion-footer>
 <ion-toolbar>
 <ion-title>Footer</ion-title>
 </ion-toolbar>
</ion-footer>

Refer ionic documentation Footer

share|improve this answer

answered Mar 24 at 6:22

SivaramakrishnanSivaramakrishnan

4761110

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for suggestions. I tried with suggested code but footer is not sticking on screen it's always coming in bottom. I want to Create sticky footer.
  
  – Akash Raj
  Mar 25 at 6:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please suggest any other idea to fix it. Screenshot: drive.google.com/file/d/1qeYrwzHshn1sqz3jQGmn8X_hINOLMgLz/…
  
  – Akash Raj
  Mar 25 at 6:51
  

  
  
  
  

add a comment | 

0

If you want to use footer the you can use the ion-footer tag which is given in the ionic. The ion-content has scroll and if you apply styles for footer the footer will not be in the fixed position. so better use the ion-footer

<ion-footer>
 <ion-toolbar>
 <ion-title>Footer</ion-title>
 </ion-toolbar>
</ion-footer>

Refer ionic documentation Footer

share|improve this answer

answered Mar 24 at 6:22

SivaramakrishnanSivaramakrishnan

4761110

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for suggestions. I tried with suggested code but footer is not sticking on screen it's always coming in bottom. I want to Create sticky footer.
  
  – Akash Raj
  Mar 25 at 6:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please suggest any other idea to fix it. Screenshot: drive.google.com/file/d/1qeYrwzHshn1sqz3jQGmn8X_hINOLMgLz/…
  
  – Akash Raj
  Mar 25 at 6:51
  

  
  
  
  

add a comment | 

If you want to use footer the you can use the ion-footer tag which is given in the ionic. The ion-content has scroll and if you apply styles for footer the footer will not be in the fixed position. so better use the ion-footer

<ion-footer>
 <ion-toolbar>
 <ion-title>Footer</ion-title>
 </ion-toolbar>
</ion-footer>

Refer ionic documentation Footer

share|improve this answer

answered Mar 24 at 6:22

SivaramakrishnanSivaramakrishnan

4761110

<ion-footer>
 <ion-toolbar>
 <ion-title>Footer</ion-title>
 </ion-toolbar>
</ion-footer>

share|improve this answer

answered Mar 24 at 6:22

SivaramakrishnanSivaramakrishnan

4761110

answered Mar 24 at 6:22

SivaramakrishnanSivaramakrishnan

4761110

answered Mar 24 at 6:22

SivaramakrishnanSivaramakrishnan

4761110