Mrrrr's Forum (VIEW ONLY)
Un forum care ofera solutii pentru unele probleme legate in general de PC. Pe langa solutii, aici puteti gasi si alte lucruri interesante // A forum that offers solutions to some PC related issues. Besides these, here you can find more interesting stuff.
|
Lista Forumurilor Pe Tematici
|
Mrrrr's Forum (VIEW ONLY) | Reguli | Inregistrare | Login
POZE MRRRR'S FORUM (VIEW ONLY)
Nu sunteti logat.
|
Nou pe simpatie:
morena28 pe Simpatie.ro
 | Femeie
25 ani
Bistrita Nasaud
cauta Barbat
27 - 52 ani |
|
|
TRaP
Moderator
Inregistrat: acum 8 ani
Postari: 937
|
|
In Chrome's Developer Tools, I injected the following code into the Console (committed with CTRL+ENTER) to enlarge some frames within an online questionnaire, frames that were cramped in a way that required an horizontal scrollbar to view an entire table, while more than 50% of the page was white.
const table = document.querySelector(".ChoiceStructure");
const width = Math.ceil(table.getBoundingClientRect().width) + 20;
[".QuestionOuter", ".QuestionBody"].forEach(selector => {
const el = document.querySelector(selector);
if (el) {
el.style.setProperty("width", `${width}px`, "important");
el.style.setProperty("max-width", `${width}px`, "important");
}
}); |
The strings marked in color are <div> tags within the specific page.
To make it persistent, while in the Developer Tools, I hit F1, and in Preferences I scrolled down to the "Persistence" section and checked "Local overrides".
Similar codes that worked for the same purpose were:
const q = document.querySelector(".QuestionOuter");
q.style.setProperty("width","1200px","important");
q.style.setProperty("max-width","1200px","important");
const b = document.querySelector(".QuestionBody");
b.style.setProperty("width","1200px","important"); |
and
document.querySelectorAll(".QuestionOuter").forEach(q => {
q.style.setProperty("width", "1400px", "important");
q.style.setProperty("max-width", "1400px", "important");
});
document.querySelectorAll(".QuestionBody").forEach(q => {
q.style.setProperty("width", "1400px", "important");
}); |
Source: Gemini Flash 3.5
|
|
| pus acum 11 zile |
|
|
TRaP
Moderator
Inregistrat: acum 8 ani
Postari: 937
|
|
To inspect widths and identify key <div> tags I injected the code below:
const table = document.querySelector(".ChoiceStructure");
let el = table;
while(el){
console.log(
el.tagName,
el.className,
getComputedStyle(el).width,
getComputedStyle(el).maxWidth,
getComputedStyle(el).overflowX
);
el = el.parentElement;
} |
It returned:
TABLE ChoiceStructure 985.556px none visible
VM79188:6 DIV QuestionBody q-matrix desktop 770px none auto
VM79188:6 FIELDSET 770px none visible
VM79188:6 DIV InnerInner BorderColor MultipleAnswer 770px none visible
VM79188:6 DIV Inner BorderColor Likert 770px none visible
VM79188:6 DIV QuestionOuter BorderColor Matrix mf QID81 770px 770px auto
VM79188:6 DIV 770px none auto
VM79188:6 DIV 770px none visible
VM79188:6 DIV SkinInner 770px 95% visible
...etc |
|
|
| pus acum 11 zile |
|
|
TRaP
Moderator
Inregistrat: acum 8 ani
Postari: 937
|
|
To save a code for later re-use, you can create a snippet.
Go to Dev Tools (F12), in the Sources tab, on the 2nd row of tabs click the >> and choose Snippets.
Click New snippet, and give it a name.
The next frame to the right of the snippet name frame should be the open snippet. Paste your desired code in there, e.g.:
const table = document.querySelector(".ChoiceStructure");
const width = Math.ceil(table.getBoundingClientRect().width) + 20;
[".QuestionOuter", ".QuestionBody"].forEach(selector => {
const el = document.querySelector(selector);
if (el) {
el.style.setProperty("width", width + "px", "important");
el.style.setProperty("max-width", width + "px", "important");
}
}); |
Press CTRL+S to save it.
Whenever you are on a "problematic" page, open the Snippets tab again in Dev Tools, right click the desired snippet -> Run.
To stop a script from running, simply reload/refresh the page.
If the page becomes problematic or doesn't behave as expected, you can always terminate the tab that is causing issues.
While Chrome window is active, hit SHIFT + ESC to open Chrome Task manager, find the problematic tab and end it. Task manager is also available via Menu - More Tools - Task Manager.
|
|
| pus acum 7 zile |
|
|
TRaP
Moderator
Inregistrat: acum 8 ani
Postari: 937
|
|
Making this load automatically on each page load (not having to manually run the snippet on every page)
I will be using Tampermoney for this and create a custom script.
1. Download Tampermonkey from Chrome add-ons store:
2. Right click the installed extension, go to Manage extension, find the toggle called Allow user scripts, and enable it
2. Create a new script
3.
// ==UserScript==
// @name Expand Table Matrix
// @namespace Expand
// @version 2.0
// @description Automatically widen Qualtrics matrix questions to fit the table.
// @match *://PAGE_TO_APPLY_TO_GOES_HERE/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function () {
'use strict';
let lastWidth = 0;
function expand() {
const table = document.querySelector(".ChoiceStructure");
if (!table) return;
const width = Math.ceil(table.getBoundingClientRect().width) + 20;
// Skip if we've already handled this table
if (width === lastWidth) return;
lastWidth = width;
document.querySelectorAll(".QuestionOuter").forEach(el => {
el.style.setProperty("width", width + "px", "important");
el.style.setProperty("max-width", width + "px", "important");
});
document.querySelectorAll(".QuestionBody").forEach(el => {
el.style.setProperty("width", width + "px", "important");
el.style.setProperty("max-width", width + "px", "important");
});
console.log("Expanded matrix to", width);
}
// Initial page
expand();
// Watch for Qualtrics replacing questions
const observer = new MutationObserver(() => {
expand();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
})(); |
If there are pages including multiple tables, you can change the following snippet:
| const width = Math.ceil(table.getBoundingClientRect().width) + 20; |
to this:
const width = Math.max(
...[...document.querySelectorAll(".ChoiceStructure")]
.map(t => Math.ceil(t.getBoundingClientRect().width) + 20)
); |
Another neat enhancement
Since I've already customized the layout, I could also automatically make the text columns a bit wider. For example:
document.querySelectorAll(".QuestionText").forEach(el => {
el.style.setProperty("max-width", "none", "important");
}); |
or even increase the overall content width:
document.querySelectorAll(".SkinInner").forEach(el => {
el.style.setProperty("max-width", "95vw", "important");
}); |
This can make long questions much easier to read.
Source: ChatGPT
|
|
| pus acum 7 zile |
|