Change TinyMCE input height from textarea height - input

Question

My form uses inputs and textareas, some of which I've added as TinyMCE elements. The problem is that the inputs are converted into the same size as the textareas. I'd like the inputs to be the same height as non-TinyMCE input fields (I'm using the latest version of TinyMCE - 3.5b2).
For example, TinyMCE adds this table to the 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 embedded style to reduce the height for inputs to 30px?
I've also posted this on the TinyMCE forums.

Answer 1

<table role="presentation" id="teaser_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 590px; height: 100px; ">
That is exactly the element you will need to change. Tinymce has the width and height init param, but there are some cases where this setting is not sufficient.
Due to the fact that the editor iframe explicitly gets the same height assigned you will have to adjust the iframe too. 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);
Idealy, this should be done right on editor initialization. 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;
});
}
});