fix footer error

JohnP

ctml I believe what you're looking for can be done with CSS.

https://discuss.flarum.org/d/26130-css-problem-with-discussionpage-nav

This is the solution I'm using and it works really well for us. Examples in action: talk.ekodiena.com

pupsik

JohnP Not even talking about footer. Why is it on flarum when you make screen smaller(length wise ) Navbar goes beyond to the bottom of screen, when in your website it ends wright where "write reply" ends.

You: https://ibb.co/PT0qMP0

Flarum: https://ibb.co/1LPXt4N

Same size screen. What is going on???

Justoverclock

ctml i need to try tomorrow

Justoverclock

so i need to add this?

@media (min-width: 992px) {
.DiscussionPage-nav, .DiscussionPage-nav>ul {
width: 190px;
position: sticky;
top: 80px;
}
.App {overflow-x: visible;}
}

ctml

Justoverclock

https://discuss.flarum.org/d/26130-css-problem-with-discussionpage-nav/3

edit: fixed

.Post::before, .Post::after {content:none;}
@media (min-width: 992px) {
    .DiscussionPage-nav, .DiscussionPage-nav>ul {
        position: sticky;
        top: 80px;
    }
    .App {overflow-x: visible;}
}

Justoverclock

ctml Just this

.Post::before, .Post::after {content:none;}

does not work for me if i reduce the size of the windows

but work with

@media (min-width: 992px) { .DiscussionPage-nav, .DiscussionPage-nav>ul { width: 190px; position: sticky; top: 80px; } .App {overflow-x: visible;} }

but the footer is too large....does not appear like my codepen

ctml

pupsik

ctml

Yeah you are right, I double checked my forum I did actually have both parts in my CSS. I was trying to go off memory from the other thread.

pupsik

what exactly does this accomplish? And why am I not seeing any changes? Just curious.

ctml

pupsik prevents the scrubber on right from overflowing on top of a custom footer (last screenshot in post 1). This is usually only an issue if you have a custom footer and are viewing a discussion with mror than a few posts.

Justoverclock

I will try this this evening 🙏

pupsik

I'm just not getting it I guess, you guys got me all paranoid now.

Here is Flarum, https://ibb.co/gwpM5sJ
Navbar goes all the way to the bottom when making screen smaller.

here is yours guys with a fix. Got space below. https://ibb.co/Wc38mxT

Here is mine (with fix) still all the way to the floor.
https://ibb.co/0BBMxtt

pupsik

Justoverclock try to add this:

@media (min-width: 992px) {
.DiscussionPage-nav, .DiscussionPage-nav>ul {
position: sticky;
top: 80px;
}
.App {overflow-x: visible;}
}

And edit this line in your footer to:

.contact-area {
    border-bottom: 1px solid #353C46;
    position: relative;
    z-index : 1;
}

Justoverclock

i think its fixed, but icon and text have too much width

edit: not fixed...now goes under

pupsik

Someone need to fix this. I thought i fixed it, but than 1st post was huge. I got tires of that navbar.

askvortsov

pupsik I'm assuming this will become easier to work with when we revamp our css. Alternatively, perhaps some JS could change the scrubber css position type when we scroll beneath the last post. PRs are welcome, but at the moment, the dev team is focused on stabilizing the extension API.

pupsik

Ok, here is what actually need to be in custom css for things to work out. This is what I have, and so far it works.

ALL of this needs to be there!!!!

.Post::before, .Post::after {content:none;}

@media (min-width: 992px) {
.DiscussionPage-nav, .DiscussionPage-nav>ul {
position: sticky;
top: 80px;
}
.App {overflow-x: visible;}
}

1st post is not huge and navbar sits where it needs to be, right next to "write reply"

pupsik

ctml Yep, without one of those elements, it will not work.

Justoverclock

pupsik in the last screen I have both, and not work, but I will try again

pupsik

Justoverclock make sure you place it in Admin custom css, and clear cache just in case.

Darkle

Justoverclock The reason why this solution doesn't work on that image is because you are using a position: sticky that always requires a top, the top is fixed regardless of the size of the web so that when you make it smaller the 80 px are maintained and the height of the desktop for that reason is superimposed again.

You should apply specific rules for that size of web, changing first the top (the 80px), as seen in the image is too much space above and secondly if it still does not fit you would have to try to change the height of the entire element.

« Previous Page Next Page »