Chaos Project

Community => News / Suggestions / Feedback => Topic started by: winkio on November 23, 2012, 02:07:03 am

Title: Code tags do not display properly on Chrome
Post by: winkio on November 23, 2012, 02:07:03 am
It's been like this for years, but we should really do something about it.  Code boxes on chrome always collapse to 1.5 or so lines, so it is really annoying to scroll through them when you can't see more than one line at a time.  It should be an easy fix to define a minimum height or minimum number of lines to display.
Title: Re: Code tags do not display properly on Chrome
Post by: G_G on November 23, 2012, 02:23:52 am
I've noticed this too, but what's really odd is sometimes it'll display properly, other times it won't.
Title: Re: Code tags do not display properly on Chrome
Post by: Blizzard on November 23, 2012, 02:39:15 am
I think that it should actually work fine. If I remember right, the CSS defines the height of the boxes. Maybe it uses height-in-points or height-in-pixels instead of height-in-lines. I'll check this out. Or somebody feels up to messing around with the source in your browser and try to fix it, feel free to do so.
Title: Re: Code tags do not display properly on Chrome
Post by: Ryex on November 23, 2012, 03:42:09 am
its'a bug with web kit based browsers when the code boxes are inside a spoiler.
Title: Re: Code tags do not display properly on Chrome
Post by: G_G on November 23, 2012, 09:14:03 am
I found the culprit.
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
window.addEventListener("load", smf_codeFix, false);
function smf_codeFix()
{
   var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");
   for (var i = 0; i < codeFix.length; i++)
   {
       if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
           codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
   }
}
// ]]></script>

When this JS is applied, it's setting the code box's height to 20 pixels.
(http://i.imgur.com/ORBKm.png)

If you can figure out where that JS is being set (which is in one of the theme files I assume) then we can simply force the height of the code boxes. I've been doing some testing and it's really odd. Some codeboxes get generated with an offsetHeight of 0 and others get an offsetHeight of 28.
Title: Re: Code tags do not display properly on Chrome
Post by: Blizzard on November 23, 2012, 05:30:30 pm
Found it, fixed it. The spoiler uses a style attribute called "display". The thing is that Webkit does not seem to propagate the change of height when "display" is changed to the children so I basically had to change this callback:

Spoiler: ShowHide
content = this.parentNode.parentNode.lastChild;
if (content.style.display == \'none\')
{
    content.style.display = \'block\';
}
else
{
    content.style.display = \'none\';
}
return false;


to this:

Spoiler: ShowHide
content = this.parentNode.parentNode.lastChild;
if (content.style.display == \'none\')
{
    content.style.display = \'block\';
}
else
{
    content.style.display = \'none\';
}
content.lastChild.style.height = content.style.height;
return false;


Chrome users, notice how it works properly now. <3
Title: Re: Code tags do not display properly on Chrome
Post by: winkio on November 23, 2012, 05:48:06 pm
<3
Title: Re: Code tags do not display properly on Chrome
Post by: Blizzard on November 23, 2012, 06:04:53 pm
OH GOD, I HIT LEVEL 500+