No internet connection
  1. Home
  2. Support

Margin of dw-forum container changes when scrolling

When I go to your main "topic view" page using either Brave or Firefox, and I scroll down enough that the "sticky" navbar at the top to be noticeable, the margin on the div with the class container dw-forum changes by exactly 100 pixels, causing the screen to jump suddenly to the right.

Strangely, this doesn't happen on Safari.

I did poke around the CSS and it's not obvious what's going on.

  • 3 replies
  1. Yes I've noticed the screen jump me too (using Chrome). Does Safari and Chrome render the CSS & HTML differently when scrolling down and the topbar becomes position: fixed and gets taken out from the flow? Hmm.

    If I change the topbar .s_TbW to display: none, then the jump happens directly, without me having to scroll down. Maybe that's a simpler way to investigate what's happening (toggling display: none on/off).

    Apparently I gave up (since the problem is still here), and accepted the layout jump when scrolling down. If you can figure out what's happening (and what looks / is the best behavior), that'd be interesting :- ) and I'd guess it'd be a quick CSS fix, once it's clear what's happening. Not saying it's that super well spent time though

    1. In reply togwd_laleo:

      Anyway, it would be nice to get this fixed some time. Marking it as Planned & added a priority tag

      1. In reply togwd_laleo:

        Found it! (Was a bit fun to investigate.) Turns out it's a margin-top: -10px that pulls the topic list up a bit (10px), so it overlaps with the topbar. Then, the browser places the topic list in the middle of the stuff in the topbar, instead of in the middle of the page.

        (And, how much space is available to the left and right in the topbar, depends on how wide [the open sidebar buttons] in the topbar happen to be. E.g. the X online in this forum < button in the upper right corner that opens the right hand sidebar.)

        When scrolling down, the topbar becomes position: fixed, and then the topic list no longer gets pulled up into the topbar by the margin-top: -10px (since the topbar is now taken out of the flow, because it's position: fixed).

        (I actually had to ask an LLM why margin-top: -10px could affect margin-*left* and -right(!))

        So, now the topic list gets horizontally centered in the middle of the page (instead of in the middle of the whitespace in the topbar), and thus suddenly jumps to the right, or to the left, a little bit, depending on what elements & widths happened to have been in the topbar when it still was static.

        ***

        So I'll either remove margin-top: -10px or change to position: relative; top: -10px, depending on what looks best. (The point with margin-top: -10px was just to remove some unnecessary whitespace, making the layout look nicer, at least I thought so back then)

        1. Progress
          with handling this problem
        2. @KajMagnus marked this topic as Planned 2025-03-26 14:33:10.496Z.
        3. @KajMagnus marked this topic as Started 2025-03-27 07:15:53.446Z.