Posts

Showing posts from 2016

Responsive tinyMCE

On a project that I'm working we're using an old version of tinyMCE ( https://www.tinymce.com/ ), specifically we are using version 3.4.5 (released in 2011). Since last year we've been focusing on making the site responsive, and we've a bunch of legacy stuff that we could improve and use newer version of the libraries that comes bundled with the system. Making this rich-text editor responsive is a little tricky since its header or toolbar is defined as a table, and its buttons as table cells. After tweaking the details I came with the following solution: .mceLayout, .mceToolbar { display: block; height: initial !important; } .mceLayout > tbody, .mceLayout > tbody > tr, .mceToolbar > tbody, .mceToolbar > tbody > tr { display: block; } .mceLayout tr.mceFirst td.mceToolbar { background: #F6F6F6; height: initial !important; overflow: hidden; width: 100% } tr.mceIframeRow td { display: block; float: left; height: 28px; } I'm