Search code examples
htmltampermonkeyuserscriptsinline-styles

Remove inline HTML style to expand table and remove double scrolling on site aonprd

I am attempting to remove an inline style on the site aonprd. Specially on all pages like this https://2e.aonprd.com/Equipment.aspx.

I can not stand this double scrolling that happens and wish to remove it so the entire table loads. Outside of clicking the 'load XX more' and 'load remaining xxx' buttons at the bottom of the tables.

The offending portion is the max-height: 95vh.

<div class="column gap-medium" style="max-height: 95vh;overflow: auto;">

I have attempted to modify my older userscripts that did similar functions on different sites. But it has been quite a while and I seem to have forgotten the specifics and can't see to get this to work. Currently have Tampermonkey for my userscripts.

// ....
// @grant        none
// @run-at       document-start
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle(' .column.gap-medium{max-height: unset !important;}')

I've also tried using Stylus but still can't get anything to stick.

Solution

  • The reason the styles aren't applied to the table is because they are appended to the <head>, while the element you want to style is inside the Shadow DOM.

    The solution is to use GM_addElement to add a <script> element that modifies the max-height CSS property of the table.

    // ==UserScript==
// @name         Remove double scrolling
// @version      0.1
// @author       double-beep
// @match        https://2e.aonprd.com/Equipment.aspx
// @grant        GM_addElement
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    const modifyCss = () => {
        const shadowRoot = document.querySelector('nethys-search').shadowRoot;
        const table = shadowRoot.querySelector('.column.gap-medium[style]');

        table.style.maxHeight = 'unset';
    };

    const shadowRoot = document.querySelector('nethys-search');
    const jsStringCode = `(${modifyCss.toString()})()`;

    GM_addElement(shadowRoot, 'script', { textContent: jsStringCode });
})();

    @run-at was changed to document-end since nethys-search doesn't appear until the document is ready.