Skip to content

Issues with Progress Bar on v3

Solved Customisation
48 4 20.0k 1
  • wrote on last edited by
    #25

    all working now.

  • all working now.

    wrote on last edited by
    #26

    @cagatay Thanks. Also fixed the floating progress bar on mobile. It’s tied into the footer code which you are not using so it wasn’t included in your build (but is now)

  • wrote on last edited by
    #27

    whats is the fix ?

  • whats is the fix ?

    wrote on last edited by
    #28

    @DownPW The footer bar js code.

  • wrote on last edited by
    #29

    You mean I have to change mine?

  • You mean I have to change mine?

    wrote on last edited by
    #30

    @DownPW no. It was missing on @cagatay install

  • wrote on last edited by
    #31

    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?

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

    wrote on last edited by
    #32

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

  • wrote on last edited by
    #33

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

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

    wrote on last edited by
    #34

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

  • wrote on last edited by
    #35

    WhatsApp Image 2023-05-19 at 19.00.05.jpeg

  • wrote on last edited by
    #36

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

  • wrote on last edited by cagatay
    #37

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

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

    wrote on last edited by
    #38

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

    wrote on last edited by
    #39

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

    wrote on last edited by
    #40

    @cagatay Excellent.

  • wrote on last edited by
    #41

    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

    wrote on last edited by phenomlab
    #42

    @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

  • wrote on last edited by phenomlab
    #43

    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;
    }
    
    wrote on last edited by
    #44

    @phenomlab said in Issues with Progress Bar on v3:

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


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
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    3k Views
    DownPW
    I’m happy to see this
  • External Links - New Window

    Solved Customisation nodebb links settings
    8
    2 Votes
    8 Posts
    2k Views
    phenomlab
    @Sampo2910 search the forum here for ogproxy which is the client side version of that plugin I wrote. It’s in use here on this forum.
  • navbar

    Solved Customisation navbar harmony
    2
    2 Votes
    2 Posts
    1k Views
    phenomlab
    Marking as resolved, based on https://community.nodebb.org/topic/18625/navbar/2
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    1k Views
    phenomlab
    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right. If you’d like to retain the original behavior, you can add this css class [data-widget-area="brand-header"] { justify-content: end; display: flex; } Further information here https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296
  • Mongo Eror with v3 beta-1

    Solved Customisation nodebb v3
    8
    4 Votes
    8 Posts
    2k Views
    phenomlab
    @cagatay ok. You should use a copy of the production database or a completely new one. Never share a database between two instances of NodeBB.
  • navigation bar is misplaced when the window gets smaller

    Solved Customisation bugs
    23
    1
    10 Votes
    23 Posts
    8k Views
    phenomlab
    @DownPW sounds good.
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    6k Views
    phenomlab
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3