how to modify a field’s size in a metabox : ROWS height, and scroll control?

Textareas behave quite different to text inputs in the browser rendering engine. I cannot figure out the use case of a single line textarea without scroll bars. If you want to copy the default text input behaviour to all effects, what is wrong with using a simple input type="text" instead for your custom field?

If you intend to keep the textarea multiline ability but do not want the lines to break without the user explicitly doing so, adding white-space: nowrap; to its style will do the trick. overflow: auto; is already a WordPress default property for them in the admin screens, so there is no need to declare it twice. However I would not advice you to do so, since it worsens the text readability and it is a nightmare to work with from handheld devices.

I believe the easiest way to handle the form elements’ styles in the dashboard is to avoid using custom css at all. WordPress default styling is consistent across screens and devices. Before adding some extra css attributes, I would ask myself if there is a real need to set a different behaviour for my metabox.

If the answer is yes, then, of course, there are some attributes which are safe to use. For a textarea dimensions, I would use the following:

  • Height: using the html attribute rows="x" or declared in em units in the stylesheet.
  • Width: declared in % units or, alternatively, using some default classes, such as large-text or wide-fat.