6

The election page has a "Your ballot" widget on the right hand side that does not scroll with the page or adapt, so I have to zoom my page size until it is small enough to fit. (Or large enough, so it appears first, but it changes to a different mode or widget.)

I'm using Firefox 93.0 (including in "Troubleshoot mode") on Windows 10

screenshot of election page scrolled down but with the election widget cut off partway at screen bottom

(Random candidates.)

(I don't know what the six-dot characters mean. "Crap shoot"? Arrows appear there on sufficient zoom-in.)

6
  • Hmm, I think there are other places in the site that act exactly like this. For instance the "actions" widget in the suggested edits queue. I'm sure that this is intended behavior, but I guess it could be annoying to some people.
    – 10 Rep
    Commented Oct 19, 2021 at 0:52
  • 5
    The six dots are a indication that you need to drag the names. I've seen it before in other software (although it's not too intuitive at first);
    – 10 Rep
    Commented Oct 19, 2021 at 0:54
  • 1
    @10Rep 25 years of web. I withhold my adjectives.
    – philipxy
    Commented Oct 19, 2021 at 0:57
  • 3
    If you scroll to the bottom of the page it should no longer be chopped off at the bottom.
    – Spectric
    Commented Oct 19, 2021 at 1:05
  • @Spectric Not chopped off a the bottom. But chopped off at the top. However in that part of the page one can scroll over the whole widget. Also, at the chosen magnification the active part of the widget is accessible without scrolling. This does not change the fact that the design is <adjective>.
    – philipxy
    Commented Oct 19, 2021 at 1:09
  • 3
    Another workaround: You can make your browser window narrower. That will trigger the mobile layout which doesn't have the fixed sidebar. Commented Oct 19, 2021 at 12:26

2 Answers 2

10

You can prevent the widget's position from fixing by using a userscript that removes the ps-sticky class:

// ==UserScript==
// @name         Anti-Sticky Ballot Widget
// @namespace    https://github.com/SpectricSO/stack-scripts
// @version      1.0
// @description  Cool stuff
// @author       SpectricSO
// @match       *://*.askubuntu.com/election*
// @match       *://*.mathoverflow.net/election*
// @match       *://*.serverfault.com/election*
// @match       *://*.stackapps.com/election*
// @match       *://*.stackexchange.com/election*
// @match       *://*.stackoverflow.com/election*
// @match       *://*.superuser.com/election*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
// @grant        none
// ==/UserScript==

this.$ = this.jQuery = jQuery.noConflict(true);
$(document).ready(function(){
    $('#sidebar').removeClass('ps-sticky');
})

install

Result:

Anti-Sticky Ballot Widget Preview

5
  • 9
    It's pretty cool how you can just call a noConflict function to make it so. Imagine if moderators had that option available to them!
    – Cody Gray Mod
    Commented Oct 19, 2021 at 3:38
  • So you voted for all 6 candidates? We're allowed to just vote for 4 of them if we want to, right? I still got the silver badge for voting, even after only dragging one name into the list.
    – Nike
    Commented Oct 19, 2021 at 19:17
  • 1
    You can vote for as many as you wish.
    – Kevin B
    Commented Oct 19, 2021 at 19:21
  • Loading jQuery (85kB of minimized code) just to perform a $(document).ready() and a .removeClass() is substantially wasteful. It's not that bad, given that you limit this to running on /election pages. It would be better to either just put the code in the page context, which already has jQuery, write it using straight JavaScript, or implement it as CSS which can be added to the document in a variety of manners which don't require jQuery. Note that even using .noConflict does still result in conflicts with some combinations of userscript managers, browsers, and jQuery versions.
    – Makyen Mod
    Commented Oct 19, 2021 at 20:32
  • Because Stack Exchange already loads jQuery you don't need to @require it. You just need to get a reference to SE's copy of it using: var $ = unsafeWindow.jQuery; See stackoverflow.com/a/4261831 Commented Oct 20, 2021 at 1:21
1

You can add some simple CSS to add a vertical scroll to the sidebar widget itself.

// ==UserScript==
// @name         Stack Exchange Allow Ballot Widget scroll
// @namespace    https://ostermiller.org/
// @version      1.0
// @description  Allow Ballot Widget scroll on Stack Exchange
// @author       Stephen Ostermiller
// @match        *://*.askubuntu.com/*
// @match        *://*.mathoverflow.net/*
// @match        *://*.serverfault.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.superuser.com/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle("@media (min-width:980px){#sidebar,.sidebar{overflow-y:auto;max-height:85vh}}")

@media (min-width:981px) so that there is no scroll on narrow pages where the sidebar is not a sidebar

overflow-y:auto -- add vertical scroll bar but only if needed

max-height:85vh -- limit the height of the sidebar to 85% of the page height so that it doesn't extend off the screen

Stack Exchange could integrate this rule into their main CSS. It should only affect users with wide but short browser screens that can't see the entire contents of fixed sidebars.

2
  • While just adding the CSS is better than loading jQuery to do effectively the same thing, you're loading this into every SE page, without any limitation to the the election page (which could be in CSS or in restricting your @match statements. The CSS you're using makes some assumptions about what the user's viewport will be. What it does should be restricted to a minimum width, as SE does have a shift in how the page looks at smaller widths, but SE's breakpoint appears to be at 817px, so you should match.
    – Makyen Mod
    Commented Oct 19, 2021 at 20:41
  • You're also making the assumption that 85vh is going to be displayable, which may not be the case given the sticky topbar and a margin down from the topbar. Overall, I'd suggest @media (min-width: 817px) {body.election-page #sidebar, body.election-page .sidebar {overflow-y: auto; max-height: calc(100vh - 80px);}}.
    – Makyen Mod
    Commented Oct 19, 2021 at 20:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .