3

I recently provided this answer and was trying to see if my output string is valid but the console window seems to cut off after a certain point.

Could we make this re-sizable, expandable, or scroll-able in some way?

enter image description here

Windows 10 - Google Chrome and Edge

11
  • 3
    The snippet console does, and always has, automatically scrolled for me. I just checked it in a non-logged-in browser profile and that console scrolled in that answer. Please check that you're not adding any custom modifications that would prevent it. My testing was on Win 10, Firefox 94.0.2, stock page.
    – Makyen Mod
    Dec 8, 2021 at 15:33
  • 4
    It does not scroll for me when logged in on Chrome, and it does scroll when logged out on Firefox. No userscripts or custom styles. Dec 8, 2021 at 15:35
  • 1
    Are you looking for Allow the stack snippets console to be maximized? Dec 8, 2021 at 15:38
  • 1
    Also, just FYI: you can apply your own styles to that console from the CSS in your snippet. So, if you want it to look a bit different for a specific snippet, you can make changes.
    – Makyen Mod
    Dec 8, 2021 at 15:43
  • 1
    @Makyen Sorry, seems specific to Chrome. I've updated my post to reflect that. It works in FF for me.
    – MonkeyZeus
    Dec 8, 2021 at 15:45
  • 1
    @Makyen I'm not looking for customization; just consistent functionality. As for your CSS suggestion I think "However, the CSS code is not a part of the answer, and hence it shouldn't be seen by others." is thoroughly relevant.
    – MonkeyZeus
    Dec 8, 2021 at 15:48
  • @SebastianSimon Not specifically, no. That is certainly a solution for this bug; maybe I should have tagged it as a bug and not "feature request"...
    – MonkeyZeus
    Dec 8, 2021 at 15:49
  • For me the discrepancy between Chrome and Firefox is in the wrapping of the text. Firefox seems happy to wrap at any + or , etc. characters, while Chrome (weirdly?) doesn't want to wrap anywhere in these lines. Adding an overflow-wrap: anywhere; may make this better than allowing horizontal scrolling, which is often a pain, less space for content due to scroll-bars, or even history navigation...
    – Kaiido
    Dec 9, 2021 at 8:14
  • @Kaiido Sorry, in no way was I suggesting horizontal scrolling. My apologies if my post makes it seem that way. Horizontal scrolling is particularly annoying in code fences.
    – MonkeyZeus
    Dec 9, 2021 at 13:22
  • 1
    @MonkeyZeus well, the issue here is that Chrome doesn't overflow this text in the <code> element, and that StackOverflow's stylesheet disabled the horizontal scrolling in its container. So yes, your issue is actually asking for an horizontal scroll.
    – Kaiido
    Dec 9, 2021 at 15:23
  • 1
    Thanks for reporting! - I've updated the status of this as it's been added to our backlog of bugs. We'll update the post when we get it fixed.
    – Catija
    Dec 9, 2021 at 19:01

1 Answer 1

3

After fiddling around in Dev Tools for a bit I can see that adding these CSS declarations would fix this specific issue:

.as-console-row-code {
    overflow-wrap: anywhere;
}
.as-console-row:after {
    white-space: nowrap;
}

I do not know if this would have other unintended consequences.


Test

var sql = `SELECT TBLLANGUAGE.NAME AS NAME1, TBLLANGUAGE_1.NAME AS NAME2, 
TBLLANGUAGELANGUAGE.LNGFKCHILD, TBLLANGUAGELANGUAGE.LNGFKPARENT, 
TBLLANGUAGELANGUAGE.STYLE, TBLLANGUAGELANGUAGE.EXTENT, 
TBLLANGUAGELANGUAGE.NATURE, TBLSOURCE.TXTTITLE, TBLSOURCE_1.TXTTITLE AS 
SURTITLE FROM ((((TBLLANGUAGE LEFT JOIN TBLLANGUAGELANGUAGE ON 
TBLLANGUAGE.ID = TBLLANGUAGELANGUAGE.LNGFKPARENT) LEFT JOIN TBLLANGUAGE 
AS TBLLANGUAGE_1 ON TBLLANGUAGELANGUAGE.LNGFKCHILD = TBLLANGUAGE_1.ID) 
LEFT JOIN TBLLANGLANGSOURCE ON TBLLANGUAGELANGUAGE.IDLANGLINK = 
TBLLANGLANGSOURCE.LNGFKLANGLINK) LEFT JOIN TBLSOURCE ON 
TBLLANGLANGSOURCE.LNGFKSOURCE = TBLSOURCE.IDSOURCE) LEFT JOIN TBLSOURCE 
AS TBLSOURCE_1 ON TBLSOURCE.LNGPARTOF = TBLSOURCE_1.IDSOURCE WHERE 
(((TBLLANGUAGELANGUAGE.LNGFKPARENT) = 8687)) OR 
(((TBLLANGUAGELANGUAGE.LNGFKCHILD) = 8687)) ORDER BY 
IIF(TBLLANGUAGELANGUAGE.LNGFKPARENT = 8687,'B','A'), TBLLANGUAGE.NAME, 
TBLLANGUAGE_1.NAME;`;

// First replace: account for JS regex special chars and escape with backslash to make them literal
// Second replace: get everything between single quotes and make it .+?
// Third replace: get all digit sequences and make them \d+
// Fourth replace: get all whitespace sequences and make them \s+
var sql_regex = sql.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' )
                   .replace( /('.+?')/g, '\'.+?\'' )
                   .replace( /\d+/g, '\\d+' )
                   .replace( /\s+/g, '\\s+' );

console.log( sql_regex );

// Test if our regex matches the string it was built from
console.log( new RegExp( sql_regex, 'g' ).test( sql ) );
.as-console-row-code {
    width: 100%;
    white-space: pre-wrap;
    padding: 3px 5px;
    display: table-cell;
    font-family: monospace;
    font-size: 13px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}
.as-console-row:after {
    display: table-cell;
    padding: 3px 6px;
    color: rgba(0,0,0,.35);
    border: 1px solid #ccc;
    content: attr(data-date);
    vertical-align: top;
    white-space: nowrap;
}

2
  • This would break in the middle of any word in any text, even ones with normal white spaces in between. A better fix would be .as-console-row-code { overflow-wrap: anywhere; }
    – Kaiido
    Dec 9, 2021 at 15:26
  • @Kaiido I like it, thanks! Answer updated.
    – MonkeyZeus
    Dec 9, 2021 at 17:08

You must log in to answer this question.

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