Solution to IE8 textarea problems

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Locked
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Solution to IE8 textarea problems

Post by Arty » Sun Jul 19, 2009 9:33 am

Because of IE8 bug with textarea, almost all styles, including proSilver, are forcing IE8 to emulate IE7 instead of taking advantage of IE8's better standards support.

I think I found a solution to this problem. This simple javascript checks width of #message-box and textarea#message that all prosilver based styles have on posting page and automatically changes "cols" parameter of textarea to resize it instead of applying width.

This code uses jQuery library, feel free to rewrite it using normal JavaScript.

First: function that checks it

Code: Select all

function check_posting_area()
{
    var box = $('#message-box');
    if(!box.length) return false;
    var textarea = $('textarea#message');
    if(!textarea.length) return false;
    textarea.css('width', 'auto');
    // check textarea width
    var diff = 20,
        width = box.width(),
        cols = textarea.attr('cols');
    if((textarea.width() + diff) >= width)
    {
        // reduce width
        var min = 200;
        var count = 0;
        while(textarea.width() > (width - diff))
        {
            count ++;
            if(count > 20) // avoid infinite loop
            {
                return false;
            }
            cols -= ((textarea.width() - width) > 100) ? 10 : (((textarea.width() - width) > 30) ? 2 : 1);
            if(cols < 10 || textarea.width() < min) return;
            textarea.attr('cols', cols);
        }
        return true;
    }
    // increase width
    var count = 0;
    while(textarea.width() < (width - diff))
    {
        count ++;
        if(count > 20) // avoid infinite loop
        {
            return false;
        }
        cols += ((width - textarea.width()) > 100) ? 10 : (((width - textarea.width()) > 30) ? 2 : 1);
        textarea.attr('cols', cols);
    }
    return true;
}
Then events that trigger it: onload event and onresize:

Code: Select all

$(window).bind('load,resize', function()
{
    if(ie8) check_posting_area();
});
then somewhere in overall_header.html add this to detect IE8:

Code: Select all

<!--[if IE 8]><script>ie8 = true;</script><![endif]-->
Feel free to use this code or its variations in any styles.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

Glenn Slayden
Registered User
Posts: 2
Joined: Fri Aug 07, 2009 5:04 am

Re: Solution to IE8 textarea problems

Post by Glenn Slayden » Fri Aug 07, 2009 5:08 am

Excellent work, CA.

I think you can improve the solution by referencing the javascript 'clientWidth' property on the textarea object, prior to setting width to 'auto.' This will get the original computed width in pixels.

Best,

Glenn

Glenn Slayden
Registered User
Posts: 2
Joined: Fri Aug 07, 2009 5:04 am

Re: Solution to IE8 textarea problems

Post by Glenn Slayden » Fri Aug 07, 2009 6:15 am

Thanks for the inspiration; after days of flailing you helped me get it working. Here's how I adapted your solution, using raw javascript that is only emitted for IE8 clients. It's clunky but it works like a charm. :D

Code: Select all

<script type="text/javascript"> 
// <![CDATA[
var deltax;
var col_px;
var adj_res = 5;	// adjustment resolution, in 'cols' units
function fix_ie8_textarea() {
	var mb = document.getElementById('message-box');
	var ta = document.getElementById('message');
	if (mb == null || ta==null)
		return;
	if (deltax==null)
	{
		deltax = mb.clientWidth - ta.clientWidth;
		col_px = ta.clientWidth / ta.cols;
	}
	var cols = ta.cols = 20;
	ta.style.width = 'auto';
	var seek = mb.clientWidth - (adj_res * col_px) - deltax;
	while (ta.clientWidth < seek)
	{
		cols += adj_res;
		ta.cols = cols;
	}
}
window.onresize = fix_ie8_textarea;
// ]]>
</script>

User avatar
Jesper Møller
Registered User
Posts: 239
Joined: Wed Jul 05, 2006 1:00 pm
Location: Copenhagen Denmark
Name: Jesper G.O. Møller
Contact:

Re: Solution to IE8 textarea problems

Post by Jesper Møller » Sun Oct 25, 2009 5:48 pm

Here is a "simple" solution to the IE8 bug:

change the textarea css

Code: Select all

#message-box textarea {
   font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
   width: 100%;
   font-size: 1.2em;
   color: #333333;
}
to:

Code: Select all

#message-box textarea {
   font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
   width: 100px;
   min-width:100%;
   max-width:100%;
   font-size: 1.2em;
   color: #333333;
}
and ad IE8 hack to the css after

Code: Select all

#message-box textarea, #ie8#fix {
   width: 100%;
}
The bug is that IE8 wont acept textarea width set to % ... but it will accept min and max width in % :roll:
and IE8 wont read annything in the #ie8#fix {} other browsers will
"Education is learning what you didn't even know you didn't know!"

"True knowledge exists in knowing that you know nothing."

User avatar
RolyRJ
Registered User
Posts: 7
Joined: Sun Jan 17, 2010 7:51 pm

Re: Solution to IE8 textarea problems

Post by RolyRJ » Mon Jan 18, 2010 2:23 am

Being a very new boy on the block for phpBB, will any or all of the above scripts orking for Subsilver2 or are they just applicable for Prosilver?

statm
Registered User
Posts: 447
Joined: Thu Jul 21, 2005 11:03 am
Location: NC, USA
Name: Matt
Contact:

Re: Solution to IE8 textarea problems

Post by statm » Fri Jan 22, 2010 9:06 am

The css changes are only applicable to Prosilver and you would need to change the css class/id's in the javascript as well. You would just need to use the equivalent class/id that subsilver uses for textarea(if any, I dont know off the top of my head).

patrick_
Registered User
Posts: 60
Joined: Fri May 25, 2007 9:37 pm

Re: Solution to IE8 textarea problems

Post by patrick_ » Thu Feb 25, 2010 11:55 pm

very BIG thanks!!!! This bug was driving me nuts. (I'm using a full custom style).
There's one small error in your sintax. It should be (there's no comma):

Code: Select all

$(window).bind('load resize', function()
{
    if(ie8) check_posting_area();
});
@Jesper Møller, I read about that solution before, but at least on my computer with my style it doesn't work (my style is XHTML 1.1)

Locked

Return to “[3.0.x] Styles Support & Discussion”