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

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

Airports at Scale

Image
Assessing NoSQL Databases In a previous post, I explained the assessment we were using at Lunatech, detailing a solution using a common tech stack, Java with Spring Boot and PostgreSQL. An idea mentioned was that it would’ve been possible to also develop a solution using a NoSQL database, since we did receive such solutions, this got me thinking: could every NoSQL family easily solve each requirement? What would be the advantages of using them over SQL? And, more importantly, do they fit in the problem and domain? In this series of posts I want to explore these questions, where each post focuses on each family. Assessment You can take a look a the assessment in the previous post , but as a quick refresher, we had to implement four requirements: Query Option will ask the user for the country name or code and print the airports & runways at each airport. Bonus point, allow fuzzy search.
 Report: 10 countries with highest number of airports (with count) and countries with lowest numbe
Read more