Skip to content

Issues with Progress Bar on v3

Solved Customisation
48 4 17.8k 1
  • how i can fix it? as i know i use also your css codes, i did not anything wihtouth you 🙂

    @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 The reason this fails for you is because you have to auto-hide the bottom bar

    b103c8c9-eb9f-45ee-9c7d-335a73e83fed-image.png

    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.

    @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

    b103c8c9-eb9f-45ee-9c7d-335a73e83fed-image.png

    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 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

    b103c8c9-eb9f-45ee-9c7d-335a73e83fed-image.png

    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.

    @cagatay Excellent.

  • 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

    image.png

  • 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

    image.png

    @DownPW I already have that here?

    a959fe2a-7fdf-4663-88fa-aa042d755576-image.png

    EDIT - I see what you mean here

    b35c5d62-460d-4204-8d45-401f36a852fd-image.png

  • 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;
    }
    
  • 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;
    }
    

    @phenomlab said in Issues with Progress Bar on v3:

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

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

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

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

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

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

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

    @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 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.

    @Panda You could use the below

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

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics