Please refrain from posting animated GIFs, memes, joke videos and so on in discussions other than those in the off topic area.

Dismiss this message to confirm your acceptance of this additional forum term of use.

Overlays Off Screen

adam_adam_ IrelandMember Posts: 12
When you click on a 'Gear' icon on the home page of the forum, for the icons on the left of the forum above each forum category, once you click on the gear icon the overlay is goes out from the icon to the left so the overlay is over half off screen, and the same happens on the gear icon on the top right of the forum beside where a member's username and avatar are, the overlay displays from the gear icon out to the right and is partly off the screen.

Not sure if you're already aware, couldn't see it reported anywhere.

Comments

  • AstrobricksAstrobricks Minnesota, USMember Posts: 2,235
    I have the same problem with the gear pop up menus. I’m using safari on an iPad.
  • benbacardibenbacardi EnglandMember Posts: 301
    Likewise on Safari on an iPhone.
  • PaperballparkPaperballpark UKMember Posts: 3,382
    Interesting! The same thing happens on my Android phone (Samsung S8+).
  • adam_adam_ IrelandMember Posts: 12
    Ok, only had a chance to properly check it out, it occurs on any lower resolution device, so PC monitors with resolutions like 1024x768, this is due to there being a static width on the forum #Body element of 960px, with left/right padding of 20px and then the rest handled by an auto margin left/right.

    A quick fix (not sure if it'll have any further knock on affects) but it will fix the gear overlay issue on the forum home page anyway. Remove the element in quotes and add the non quoted elements. Will also fix the issue on mobile devices.

    OptionsMenu .Flyout {
    	/* remove 'right: -9px' */
    	left: -9px;
    }
    
    .OptionsMenu .Flyout::before
    , .OptionsMenu .Flyout::after {
    	/* remove 'left: inherit' */
    	/* remove 'right: 14px' */
    	left: 14px;
    	right: inherit;
    }
    
    .MeBox .Flyout {
    	/* remove 'left: 14px' */
    	right: -4px;
    }
    
    .Flyout::before
    , .Flyout::after {
    	/* remove 'left: 9px' */
    	right: 10px;
    }
Sign In or Register to comment.
Recent discussions Categories Privacy Policy