Issues with Progress Bar on v3

[cagatay]

Mark hi,

on the Android phone when client at main page, footer bar which has new message, new post, profil etc. can not seen because of bar. How we can change or hide for andorid user this bar on main page?

[phenomlab]

@cagatay Because of the progress bar, or the bottom bar?

[cagatay]

because of progress bar, andorid user can not see new message, new post, profil bar.

[phenomlab]

@cagatay Send me a screenshot. I am connected to your forum now and am not able to replicate this.

[cagatay]

[phenomlab]

@cagatay This appears to be a bug on your forum that is being caused by other CSS. I am using exactly the same code on Sudonix without any issues. In addition, your bottombar appears to be hiding on scroll, which is correct, but not returning when it reaches the correct position. My code does not touch the bottom bar.

Not sure where this is coming from presently.

[cagatay]

how i can fix it? as i know i use also your css codes, i did not anything wihtouth you

[phenomlab]

@cagatay I’m not sure yet. I will need to look at this when I have some free time. For now, you could disable the progress bar by removing the header.

[cagatay]

@phenomlab said in Issues with Progress Bar on v3:

@cagatay The reason this fails for you is because you have to auto-hide the bottom bar

I’ve made this change and it’s now working for the most part - but it should also float with the bottom bar depending on it’s position. Not sure why that’s not working but looking now.

i did disable mode auto hide now working normally on phones.

[phenomlab]

@cagatay Excellent.

[DownPW]

yop Mark

I see this on progress bar :

On small screen resolutions, the space between the arrows and the background div (progress bar) is not fixed.
It wouldn’t hurt to add fixed spaces no matter the resolution

[phenomlab]

@DownPW I already have that here?

EDIT - I see what you mean here

[phenomlab]

OMG. Why on earth did I use percentages???

.pageUp {
    font-size: 1.25rem !important;
    left: 6%;
    line-height: 1.5;
    position: absolute;
    z-index: 10;
}
.pageDown {
    font-size: 1.25rem !important;
    line-height: 1.5;
    position: absolute;
    right: 6%;
    z-index: 10;
}

Change the left and right values shown above to be 1rem (or whatever value you’d prefer) and not 6%

So

.pageUp {
    font-size: 1.25rem!important;
    left: 1rem;
    line-height: 1.5;
    position: absolute;
    z-index: 10;
}
 
.pageDown {
    font-size: 1.25rem!important;
    line-height: 1.5;
    position: absolute;
    right: 1rem;
    z-index: 10;
}

[DownPW]

@phenomlab said in Issues with Progress Bar on v3:

OMG. Why on earth did I use percentages???

[Panda]

I often use my mobile landscape, and then this progress bar takes up a lot of the screen.

Id rather remove it entirely.
How can I do that, another CSS fix?

[phenomlab]

@Panda Yes, that would be the only way as this is part of the core.

[Panda]

@phenomlab ok how could I do that please?

I have an old flarum forum I had given up with, but I have to say its looking nicer than nodebb on mobile now. I prefer minimalistic and uncluttered look.

[phenomlab]

@Panda You could use the below

.page-topic .pagination-block.ready {
    display: none;
}