tampermonkey script unable to change css

965 Views Asked by At

I get emails from a business associate of mine, and with my gmail page zoomed to 125% in Chrome, the right (maybe 5%) gets cut off. I went into inspect and saw that if I changed a style attribute, 'table-layout' either from 'fixed' to 'auto', or simply unchecked it (in inspect), the problem goes away. So I wrote my first tampermonkey script to try and fix the situation, as follows:

// ==UserScript==
// @name         Remove table-layout fixed
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  table-layout: fixed to auto, in emails
// @author       DJ
// @match        https://mail.google.com/mail
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// ==/UserScript==

$(".ii.gt.adP.adO").children().children().children().css("table-layout", "auto");

I used the class names .ii.gt.adP.adO because they are in the div closest to the table in question that also seem to be stable for all emails (i.e., those class names are in multiple emails, other class names in the structure change.). The table in question is a great-grandchild of the div with those class names (hence the .children().children().children() ). I checked that that syntax would work for a great-grandchild table here.

Here's the pertinent section in inspector: screenshot of chrome inspector

Any help is greatly appreciated.

EDIT: I changed the match statement to *://mail.google.com/* per this site but it didn't make a difference.

1

There are 1 best solutions below

0
On

This is the script that worked:

// ==UserScript==
// @name         Remove table-layout fixed
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adam's emails contain some css, table-layout: fixed;, that's screwing up the display
// @author       DJ
// @match        *://mail.google.com/*
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle    

// ==/UserScript==
function adjustTable (jNode) {
    jNode.children().children().children().css("table-layout","auto");
}
waitForKeyElements (".ii.gt.adP.adO", adjustTable);

Thanks again to Brock and his utility.