• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Not a bug TinyMCE breaking out fluid width style

mrGTB

Well-known member
#1
I just spotted this while resizing my web browser using the fluid style here. TinyMCE is breaking out the style container box.

Snap1.jpg
 

Brogan

XenForo moderator
Staff member
#2
That has been reported several times before and isn't a bug.

The editor window does not resize.

You need to refresh the page after resizing.
 

Vincent

Well-known member
#5
What do you mean by use "recommended fluid settings"?
Well, I don't know if it's recommended but when setting your style to fluid there's an example given at the bottom of the page :)
I always used that since other widths caused problems to me.
 

digitalpoint

Well-known member
#8
Not sure why TinyMCE insists on setting a static width at the time it was initialized, but it's easy enough to work around... just run this JavaScript after TinyMCE is initialized:

Code:
$('#ctrl_message_html_tbl').css('width', 'auto')
 

mrGTB

Well-known member
#9
I hope they implement that then, as I class it as being a bug myself breaking the layout like it does. One work around also is not to use a fluid width, use a fixed width instead. But wat you posted looks like a proper fix to solve that problem.

Another bad thing about it, if you use fluid style and shrink you browser really small, refresh then go to full screen. Your left with LMAO a small text box

small-tinymce.jpg
 

digitalpoint

Well-known member
#10
My above hack to fix it is wrong... the width should be 100%. This is what I'm using (fires it after 2 seconds to make sure the editor has had enough time to init itself)...

Code:
setTimeout(function() {
	$('#ctrl_message_html_tbl').css('width', '100%');
}, 2000);
 
#11
My above hack to fix it is wrong... the width should be 100%. This is what I'm using (fires it after 2 seconds to make sure the editor has had enough time to init itself)...

Code:
setTimeout(function() {
     $('#ctrl_message_html_tbl').css('width', '100%');
}, 2000);
Rather than calling that every time the page loads, here's code that only fires if the window is resized:

Code:
$(window).resize(function () {
     $('#ctrl_message_html_tbl').css('width', '100%');
});