sticky footer not staying at the bottom after I scroll
0
- i am trying to develop a sticky footer.
- when you click add new sports button a drawer opens in that footer stays at the bottom.
- but when I scroll the page the footer is moving up.
- I am tried with various positions but still not working. can you tell me how to fix it.
-providing my code snippet, sandbox and screenshot below.
https://codesandbox.io/s/jp82jl853v
sportsEditTabContentFooter: {
position: "fixed",
left: 0,
bottom: 0,
width: "100 %",
backgroundColor: "red",
color: "white",
textAlign: "center"
},
<div className={classes.sportsEditTabContentFooter}>
<div>sports Status</div>
<div>
<Button variant="outlined" className={classes.button}>
Cancel
</Button>
<Button
variant="outlined"
onClick={this.savesports}
className={classes.button}
>
Save sports test
</Button>
</div>
</div>
javascript html css reactjs material-ui
asked Nov 20 '18 at 21:42
inji injiinji inji
7210
add a comment |
0
- i am trying to develop a sticky footer.
- when you click add new sports button a drawer opens in that footer stays at the bottom.
- but when I scroll the page the footer is moving up.
- I am tried with various positions but still not working. can you tell me how to fix it.
-providing my code snippet, sandbox and screenshot below.
https://codesandbox.io/s/jp82jl853v
sportsEditTabContentFooter: {
position: "fixed",
left: 0,
bottom: 0,
width: "100 %",
backgroundColor: "red",
color: "white",
textAlign: "center"
},
<div className={classes.sportsEditTabContentFooter}>
<div>sports Status</div>
<div>
<Button variant="outlined" className={classes.button}>
Cancel
</Button>
<Button
variant="outlined"
onClick={this.savesports}
className={classes.button}
>
Save sports test
</Button>
</div>
</div>
javascript html css reactjs material-ui
asked Nov 20 '18 at 21:42
inji injiinji inji
7210
1
Did you triedposition: sticky;?
– gearsdigital
Nov 20 '18 at 21:48
@gearsdigital hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:50
add a comment |
0
0
0
- i am trying to develop a sticky footer.
- when you click add new sports button a drawer opens in that footer stays at the bottom.
- but when I scroll the page the footer is moving up.
- I am tried with various positions but still not working. can you tell me how to fix it.
-providing my code snippet, sandbox and screenshot below.
https://codesandbox.io/s/jp82jl853v
sportsEditTabContentFooter: {
position: "fixed",
left: 0,
bottom: 0,
width: "100 %",
backgroundColor: "red",
color: "white",
textAlign: "center"
},
<div className={classes.sportsEditTabContentFooter}>
<div>sports Status</div>
<div>
<Button variant="outlined" className={classes.button}>
Cancel
</Button>
<Button
variant="outlined"
onClick={this.savesports}
className={classes.button}
>
Save sports test
</Button>
</div>
</div>
javascript html css reactjs material-ui
asked Nov 20 '18 at 21:42
inji injiinji inji
7210
- i am trying to develop a sticky footer.
- when you click add new sports button a drawer opens in that footer stays at the bottom.
- but when I scroll the page the footer is moving up.
- I am tried with various positions but still not working. can you tell me how to fix it.
-providing my code snippet, sandbox and screenshot below.
https://codesandbox.io/s/jp82jl853v
sportsEditTabContentFooter: {
position: "fixed",
left: 0,
bottom: 0,
width: "100 %",
backgroundColor: "red",
color: "white",
textAlign: "center"
},
<div className={classes.sportsEditTabContentFooter}>
<div>sports Status</div>
<div>
<Button variant="outlined" className={classes.button}>
Cancel
</Button>
<Button
variant="outlined"
onClick={this.savesports}
className={classes.button}
>
Save sports test
</Button>
</div>
</div>
javascript html css reactjs material-ui
javascript html css reactjs material-ui
asked Nov 20 '18 at 21:42
inji injiinji inji
7210
asked Nov 20 '18 at 21:42
inji injiinji inji
7210
asked Nov 20 '18 at 21:42
inji injiinji inji
7210
asked Nov 20 '18 at 21:42
inji injiinji inji
7210
asked Nov 20 '18 at 21:42
inji injiinji inji
7210
7210
1
Did you triedposition: sticky;?
– gearsdigital
Nov 20 '18 at 21:48
@gearsdigital hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:50
add a comment |
1
Did you triedposition: sticky;?
– gearsdigital
Nov 20 '18 at 21:48
@gearsdigital hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:50
1
1
Did you tried
position: sticky;?– gearsdigital
Nov 20 '18 at 21:48
Did you tried
position: sticky;?– gearsdigital
Nov 20 '18 at 21:48
@gearsdigital hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:50
@gearsdigital hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:50
add a comment |
1 Answer
1
active
oldest
votes
2
After looking at your code it looks like you have not applied the position:sticky to the div. If you add that you should notice it sticks where you have positioned it.
.RecipeReviewCard-sportsEditTabContentFooter-649 {
left: 0;
width: 100%;
color: white;
bottom: 0;
text-align: center;
background-color: red;
position: sticky;
}
answered Nov 20 '18 at 21:50
Robert PerezRobert Perez
12210
hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:51
2
@injiinji What an attitude is that? You should at least accept this answer before forcing an answer to another question!
– gearsdigital
Nov 20 '18 at 21:54
1
Also, if you copy this code make sure to remove the duplicated position declarations which @robert-perez probably overlooked ;)
– gearsdigital
Nov 20 '18 at 21:56
Good call gearsdigital, I'm going to edit that in order to make sure no one gets confused.
– Robert Perez
Nov 20 '18 at 21:59
@gearsdigital sorry I updated...can you help me
– inji inji
Nov 21 '18 at 2:03
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402011%2fsticky-footer-not-staying-at-the-bottom-after-i-scroll%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
After looking at your code it looks like you have not applied the position:sticky to the div. If you add that you should notice it sticks where you have positioned it.
.RecipeReviewCard-sportsEditTabContentFooter-649 {
left: 0;
width: 100%;
color: white;
bottom: 0;
text-align: center;
background-color: red;
position: sticky;
}
answered Nov 20 '18 at 21:50
Robert PerezRobert Perez
12210
hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:51
2
@injiinji What an attitude is that? You should at least accept this answer before forcing an answer to another question!
– gearsdigital
Nov 20 '18 at 21:54
1
Also, if you copy this code make sure to remove the duplicated position declarations which @robert-perez probably overlooked ;)
– gearsdigital
Nov 20 '18 at 21:56
Good call gearsdigital, I'm going to edit that in order to make sure no one gets confused.
– Robert Perez
Nov 20 '18 at 21:59
@gearsdigital sorry I updated...can you help me
– inji inji
Nov 21 '18 at 2:03
add a comment |
2
After looking at your code it looks like you have not applied the position:sticky to the div. If you add that you should notice it sticks where you have positioned it.
.RecipeReviewCard-sportsEditTabContentFooter-649 {
left: 0;
width: 100%;
color: white;
bottom: 0;
text-align: center;
background-color: red;
position: sticky;
}
answered Nov 20 '18 at 21:50
Robert PerezRobert Perez
12210
hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:51
2
@injiinji What an attitude is that? You should at least accept this answer before forcing an answer to another question!
– gearsdigital
Nov 20 '18 at 21:54
1
Also, if you copy this code make sure to remove the duplicated position declarations which @robert-perez probably overlooked ;)
– gearsdigital
Nov 20 '18 at 21:56
Good call gearsdigital, I'm going to edit that in order to make sure no one gets confused.
– Robert Perez
Nov 20 '18 at 21:59
@gearsdigital sorry I updated...can you help me
– inji inji
Nov 21 '18 at 2:03
add a comment |
2
2
2
After looking at your code it looks like you have not applied the position:sticky to the div. If you add that you should notice it sticks where you have positioned it.
.RecipeReviewCard-sportsEditTabContentFooter-649 {
left: 0;
width: 100%;
color: white;
bottom: 0;
text-align: center;
background-color: red;
position: sticky;
}
answered Nov 20 '18 at 21:50
Robert PerezRobert Perez
12210
After looking at your code it looks like you have not applied the position:sticky to the div. If you add that you should notice it sticks where you have positioned it.
.RecipeReviewCard-sportsEditTabContentFooter-649 {
left: 0;
width: 100%;
color: white;
bottom: 0;
text-align: center;
background-color: red;
position: sticky;
}
answered Nov 20 '18 at 21:50
Robert PerezRobert Perez
12210
edited Nov 20 '18 at 22:30
answered Nov 20 '18 at 21:50
Robert PerezRobert Perez
12210
answered Nov 20 '18 at 21:50
Robert PerezRobert Perez
12210
answered Nov 20 '18 at 21:50
Robert PerezRobert Perez
12210
12210
hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:51
2
@injiinji What an attitude is that? You should at least accept this answer before forcing an answer to another question!
– gearsdigital
Nov 20 '18 at 21:54
1
Also, if you copy this code make sure to remove the duplicated position declarations which @robert-perez probably overlooked ;)
– gearsdigital
Nov 20 '18 at 21:56
Good call gearsdigital, I'm going to edit that in order to make sure no one gets confused.
– Robert Perez
Nov 20 '18 at 21:59
@gearsdigital sorry I updated...can you help me
– inji inji
Nov 21 '18 at 2:03
add a comment |
hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:51
2
@injiinji What an attitude is that? You should at least accept this answer before forcing an answer to another question!
– gearsdigital
Nov 20 '18 at 21:54
1
Also, if you copy this code make sure to remove the duplicated position declarations which @robert-perez probably overlooked ;)
– gearsdigital
Nov 20 '18 at 21:56
Good call gearsdigital, I'm going to edit that in order to make sure no one gets confused.
– Robert Perez
Nov 20 '18 at 21:59
@gearsdigital sorry I updated...can you help me
– inji inji
Nov 21 '18 at 2:03
hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:51
hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:51
2
2
@injiinji What an attitude is that? You should at least accept this answer before forcing an answer to another question!
– gearsdigital
Nov 20 '18 at 21:54
@injiinji What an attitude is that? You should at least accept this answer before forcing an answer to another question!
– gearsdigital
Nov 20 '18 at 21:54
1
1
Also, if you copy this code make sure to remove the duplicated position declarations which @robert-perez probably overlooked ;)
– gearsdigital
Nov 20 '18 at 21:56
Also, if you copy this code make sure to remove the duplicated position declarations which @robert-perez probably overlooked ;)
– gearsdigital
Nov 20 '18 at 21:56
Good call gearsdigital, I'm going to edit that in order to make sure no one gets confused.
– Robert Perez
Nov 20 '18 at 21:59
Good call gearsdigital, I'm going to edit that in order to make sure no one gets confused.
– Robert Perez
Nov 20 '18 at 21:59
@gearsdigital sorry I updated...can you help me
– inji inji
Nov 21 '18 at 2:03
@gearsdigital sorry I updated...can you help me
– inji inji
Nov 21 '18 at 2:03
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402011%2fsticky-footer-not-staying-at-the-bottom-after-i-scroll%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Did you tried
position: sticky;?– gearsdigital
Nov 20 '18 at 21:48
@gearsdigital hey it worked thanks, can you help me with this one stackoverflow.com/questions/53265169/…
– inji inji
Nov 20 '18 at 21:50