Changing TinyMCE input height from textarea height

My form uses inputs and text boxes, some of which I added as TinyMCE elements. The problem is that the inputs are being converted to the same size as in the text areas. I would like the inputs to be the same height than non-TinyMCE input fields (I am using the latest TinyMCE - 3.5b2).

For example, TinyMCE adds this table to inputs and textareas:

<table role="presentation" id="teaser_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 590px; height: 100px; ">

How can I change this inline style to reduce the height for the inputs to 30px?

I also posted this on the TinyMCE forums.

+3


source to share


1 answer


<table role="presentation" id="teaser_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 590px; height: 100px; ">

      

This is exactly the element that you will need to change. Tinymce has an init parameter and a width and height, but there are some cases where this parameter is not sufficient. Due to the iframe editor clearly getting the same height, you will have to customize the iframe as well. You will need to call

var new_val = '30px';

// adjust table element
$('#' + 'my_editorid' + '_tbl').css('height', new_val);

//adjust iframe
$('#' + 'my_editorid' + '_ifr').css('height', new_val);

      

Idealism, this must be done correctly when initializing the editor. So use:



tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {

        var new_val = '30px';

        // adjust table element
        $('#' + ed.id + '_tbl').css('height', new_val);

        //adjust iframe
        $('#' + ed.id + '_ifr').css('height', new_val);
      });
   }
});

      

Update: Solution without jQuery:

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {

          var new_val = '30px';

          // adjust table element
          var elem = document.getElementById(ed.id + '_tbl');
          elem.style.height = new_val;

          // adjust iframe element
          var iframe = document.getElementById(ed.id + '_ifr');
          iframe.style.height = new_val;
      });
   }
});

      

+3


source







All Articles