Not a bug TinyMCE breaking out fluid width style

[mrGTB]

I just spotted this while resizing my web browser using the fluid style here. TinyMCE is breaking out the style container box.

 

[Paul B]

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]

Are you using the recommended fluid settings?

I do and see no problem in Chrome

 

[mrGTB]

Are you using the recommended fluid settings?

I do and see no problem in Chrome

What do you mean by use "recommended fluid settings"?

 

[Vincent]

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.

 

[mrGTB]

You've lost me? What's this example your talking about?

 

[Vincent]

You've lost me? What's this example your talking about?

Haha nevermind
It's not a bug, I can't help it

 

[digitalpoint]

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:

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

 

[mrGTB]

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

 

[digitalpoint]

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)...

setTimeout(function() {
	$('#ctrl_message_html_tbl').css('width', '100%');
}, 2000);

 

[Rockchurch]

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)...

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:

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