ID:1411180
 
Applies to:Website
Status: Open

Issue hasn't been assigned a status value.
Could a max height attribute be set to these tags so it scrolls if the code height is longer than the max height?

Similar to the Horizontal Scrolling if you have a long line of code like this:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


Then posts won't look huge when people post huge amounts of code. It will look neater and cleaner in my opinion.
++ //I would prefer it to have a large number of lines before initiating the scroll bar, but this would make posts in Dev Help much easier to sort through, don't have to scroll through 100+lines of needless, useless, ripped then copy/pasted code asking what's wrong. But if we're counting lines already in implementing this(assuming that'd be how it was implemented) might as well add in the line numbers in the tags.
I wrote a GreaseMonkey userscript to do this. Div tags in the context the dm block is in can't accept percentage heights, but they do accept pixel heights. I made a script that'll detect if a block is over a certain height and shrink it down with a scrollbar.

I'm short on time right now so I wasn't able to add any fancy ways of customizing the numbers on the fly but I'll do that when I have more time.

If you use Firefox, Chrome, or newer IE with UserScript support you just have to create a script with the following code:

// ==UserScript==
// @name DMBlockHeight
// @namespace BYOND
// @description Makes the height of <dm> blocks controllable. (By Nadrew)
// @include http://www.byond.com/forum/?post=*
// @version 1
// @grant none
// ==/UserScript==

// TODO: Add fields for customizing the height threshold.

function AlterTags() {
// Loops over the <dm> tags on the page and changes their style.
// Unfortunately div.height only works for our purposes as pixel sizes and not percentages.
var divs = document.getElementsByTagName('div');
for(var div in divs) {
var div_element = divs[div];
if(!div_element) continue;
if(div_element.className == 'dmcode') {
if(div_element.offsetHeight > 500) {
div_element.style.height = '500px';
}
}
}
}

AlterTags();


Will improve soon.
That should be for(var div in divs), so the var is local.

Another option is altering the CSS to set a max-height for div.dmcode. You can do that with Greasemonkey, but Stylish is a better option.
Max-height is what I had initially but it was giving me grief when resizing the window. The variable div should definitely be local, my bad =P

It's weird that it doesn't allow percentage values though, all I could get to change the box height. I didn't alter the CSS file manually because I plan to expand this to let the user alter the height of specific boxes on the fly -- when I get around to it.
In response to Nadrew
Nadrew wrote:
It's weird that it doesn't allow percentage values though, all I could get to change the box height. I didn't alter the CSS file manually because I plan to expand this to let the user alter the height of specific boxes on the fly -- when I get around to it.

Percentages in CSS are relative to the container. I'm not sure percentage height works at all when the immediate container has no fixed height, but then vertical dimensioning and positioning in CSS are notoriously bad thanks to bad decisions on the W3C's part (and of course the continued existence of IE). Getting a page to fit the height of the window is actually rather an enormous challenge, and when another div is allowed to stretch out past that, any divs within it won't be able to calculate height relative to window size anymore.