fix footer error

pupsik

[deleted] That's for @Justoverclock who had a problem.

If I understood his issue correctly.

Justoverclock

[deleted] so i need to put css into html as <style>?

[deleted]

Justoverclock yes, but you could also include it in your custom CSS and that will also work.

pupsik

Custom html goes to custom html
custom css goes to custom css (without <style>)

ctml

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

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

I am already using this to fix the scrubber overflowing my custom footer, the height of the footer does not matter.

Justoverclock

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

I am already using this to fix the scrubber overflowing my custom footer, the height of the footer does not matter.

I try this solutions, but I think this need to be fixed, a lot of user that want Flarum are not coder 😅

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

ctml

Justoverclock I agree, but does the css fix your issue?

Justoverclock

ctml i need to try tomorrow

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

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.

« Previous Page Next Page »