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 sorry about the !importants, please feel free to remove them if you don't need them on your codebase. Hope it helps!

PS: Note that the last version of tinyMCE are actually responsive, this hack is only for old version (assuming you can't upgrade)

Comments

Post a Comment

Popular posts from this blog

Java ESC/POS Image Printing

Image
Hi! I've been wanting to do this post for a while. For many years I've been working from time to time with various printing issues, mainly in the context of Kiosk/Receipt printing. The most common printer that I've used was an Epson Thermal Printer, such as the TM-T88III or more recently TM-T88V (which my article will treat). One of the various requirements from my clients had been putting their logo on their receipts, and although you can upload the logo to the printer with a tool and tell the printer to print logo #1; this way can be very rigid and hard to maintain (changing the logo would require for me to go printer by printer uploading the new logo). A better way is to raster the image pixel by pixel using ESC/POS, the native command language of the printer. Being a thermal printer, there is no concept of color, nor gray scale; either the pixel is burned or not burned, black or white. This is a very important concept to have in mind. ESC/POS is Epson's...
Read more

How to make your own DIY budget gym

Image
Where there is a will there's a way . With the current COVID-19 situation gyms were closed for several months, so as a lot of other people, I’d to find my way around exercising and keeping in shape. My particular situation when all this started was that I was resuming my training after a trip to Argentina, which lasted 3 weeks. During that time I did mostly bodyweight exercises following a similar template as Convict Conditioning . When I came back to NL, gyms closed after one session, and after 2 years of hard work I didn’t want to go back to square one. In this article I’ll describe some of DIY projects and exercises that I did during the COVID-19 lockdown, and also share that you can get a decent workout if you're willing to be flexible. Disclaimer: This article includes DIY equipment, and thus is not meant for heavy duty. You won’t find here the same range as you’ve on a gym either. The resources provided here are meant to be used as guidelines or templates, YMMV. And, I...
Read more

Pitfalls in Kryo Serialization

Image
For one of our projects we serialize information coming from IoT devices into a Kafka topic, which is later processed by several application that aggregate the information for different use cases (e.g. notify user when room temperature has drop below a threshold). In the Java ecosystem we have several tools to perform this serialization: Apache Thrift , Apache Avro , or Google Protocol Buffers to name a few. In this project, though, we decided to use Kryo , which offers another set of tradeoffs than the aforementioned libraries. Along the years we ran into several pitfalls, my hope is that with this blogpost you can avoid making the same mistakes. You can check the companion code to this blogpost here . EDIT: Added pitfall #4 and guidelines Introduction According to Kryo’s GitHub page: Kryo is a fast and efficient binary object graph serialization framework for Java. The goals of the project are high speed, low size, and an easy to use API. The project is useful any time objec...
Read more