Change the height of a Richtext field rendered with <apex:inputField>

Question

I am using <apex:inputField> to display a richtext field on my VF page as I found out that the "Upload Images" functionality only exits when I render those fields not with <apex:inputTextarea richtext="true"... />.

My problem now is that there is no rows attribute on <apex:inputField> to set the height of the textarea. I tried just adding a style="height:xyz px" but this didn't work.

Answer 1

Depending on how fine grain of a control you need on the height you can just set the # Visible Lines property of the actual field on the Custom Field Definition. It must be between 10 and 50 lines, though.

Answer 2

Edit: FWIW, in my org the "Upload Images" functionality works alright on Rich Text Area fields - maybe triple check your config? If you can resolve that, @PeterKnolle has the better answer.

Salesforce use CKEditor to decorate the richtext editor on top of a textarea. They leave the editor identifier in the global scope, and you can call resize to tweak as needed.

The nice way to do this would be to use the instanceReady hook:

<script>
  editor.on('instanceReady', function(event) {
    event.editor.resize(0, 400); //leave first parameter as 0 to affect only height.
  });
</script>

The nasty way to do this is to trash the CSS:

<style>
  .cke_contents {
    height: 400px !important;
  }
</style>