Ticket #11217 (confirmed Bug)

Opened 5 years ago

Last modified 3 years ago

Sunburst Theme: Expanding textarea's right portlets bleed through

Reported by: rossp Owned by:
Priority: minor Milestone: 4.x
Component: Templates/CSS Version: 4.0
Keywords: Cc: keul, fdelia

Description

When expanding textarea's (such as the description or body text fields on an edit form) under the Sunburst theme, any right portlets don't move and bleed through the textarea's. I confirmed that the Plone Classic theme behaves properly. See attached image.

Attachments

textarea-portlet-bleed.jpg Download (167.6 KB) - added by rossp 5 years ago.
Screenshot

Change History

Changed 5 years ago by rossp

Screenshot

comment:1 Changed 4 years ago by kleist

  • Component changed from Unknown to Templates/CSS

comment:2 Changed 4 years ago by kleist

  • Status changed from new to confirmed
  • Version set to 4.0

comment:3 Changed 3 years ago by keul

  • Cc keul added

This bug is still alive (and BTW: is not a "minor" bug for Chrome users).

I reproduced the problem on Plone 4.2 and also 4.3b1 with the new TinyMCE editor.

Last edited 3 years ago by keul (previous) (diff)

comment:4 Changed 3 years ago by fdelia

  • Cc fdelia added

comment:5 Changed 3 years ago by maartenkling

Workaround if you need it, remove the floating element from the tiny icons

span.ploneSkin table.mceToolbar {

float: none;

}

comment:6 Changed 3 years ago by fdelia

For me the problem is due to the structure of the toolbar: icons are placed in tables, these tables are included in a td in another table.

Possible solution:

1) set width of td that contains tables of icons

2) set display block of td that contains tables of icons

I found this solution for my use case:

1) I customized the file "tiny_mce_init.js"

function fixWidthTableInitInstance(inst) {
    var tinytable = $("table.mceLayout");
    var tinytoolbar = tinytable.find("tr.mceFirst td.mceToolbar");
    $(tinytoolbar).css("width",$(tinytable).css("width"));
}

...

var init_dict = {
...
init_instance_callback : "fixWidthTableInitInstance"

...

2) I put the following rules in a my css file

td.mceToolbar {
    display:block;
}

comment:7 Changed 3 years ago by vangheem

The suggested fix does not work for me. I'm wondering if this is even something worth trying to fix at this point though.

Expanding the text areas is a browser feature and can be expected to screw up styles when using.

comment:8 Changed 3 years ago by maartenkling

how to explain that to the customer using Chrome... There was a italian blog a while ago having a solution, dont know where anymore.

comment:9 Changed 3 years ago by keul

The solution above is exactly the one in the blog post you are talking about:  http://blog.redturtle.it/2013/01/24/plone-i-bizzarri-comportamenti-di-tinymce-e-chrome

Note: See TracTickets for help on using tickets.