I have created a WYSIWYG editor inside of a metabox, and I have loaded it on demand via javasacript. But the WYSIWYG is not responsive, like the default one is. How can I make it responsive? It sits inside of a table, and the table width is set to 100%. As the rows get smaller the WYSIWYG remains the same size but part of the editor becomes hidden.

I've tried:

.mceToolbarTop * {

.mceToolbarTop select {

.mceToolbarTop option {

The html is really long, and difficult to format here. Or else i'd paste it.

My container holding the WYSIWYG is 80% wide, and the WYSIWYG styles is set to 100%, so I don't know why its not respecting the styles I have set.

  • Hard to tell without looking at the page structure. But it's likely that the textarea or a parent of it has a fixed width. – gdaniel Mar 7 '14 at 17:09
  • Thanks, I think I was able to find a fix on a random SO answer from a few months back. – EHerman Mar 7 '14 at 17:22

Using the following code to FORCE the buttons to wrap when the width of the editor hit a certain width, I used this code:

where single-movie-row is the container holding my WYSIWYG

.single-movie-row .mceToolbar td {
    float: left;
.single-movie-row .mceToolbar td:nth-of-type(11){
    clear: left;
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.