0

I'm stumped by being unable to find a way to do some really basic adjustments to the textarea in my custom metabox.

Looking at a default Wordpress Post Admin screen, the Tags metabox is a single-line field, sized to exactly hold one row of characters. It scrolls to the right if you overfill the available space. no resizing, no scroll bars.

I cannot replicate this in my own custom textarea fields, in my metabox.

My fields are about 30% taller than the filling text, regardless of font size. They scroll vertically when available horizontal space has been taken.

I prefer to size the textarea by cols="X" rows="Y" method, but have been unable to find any documentation on how to specify a value for row height.

Adjusting line-height doesn't solve the problem : by the time I reduce line-height enough to effect the textarea, the font is badly aligned and overlaps itself on my multi-line fields.

The only method I've found online for controlling the scroll of a textarea is through CSS manipulation of how overflow is handled. But there must be a better way to adjust this.

1 Answer 1

0

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.
3
  • thanks for your reply :) the issue for me is the paucity of information about how to manipulate something as basic as the ROWS height... it's clearly set at a default percentage of the contained font, but i can't find anything about how to change it. doubly vexing is the example of the default Wordpress "Tags" metabox, whose TEXTAREA behaves exactly as i wish i could make my own, but i am unable to replicate it :(
    – ijason
    Commented Jun 16, 2016 at 15:25
  • If I'm not mistaken, the tags metabox located under the publish button is not a textarea, it's a input type="text". May I ask how are you creating the metabox? I suggest that you install this plugin and study the different styling options and type of fields which are implemented in the admin area by default. Maybe one is valid for your purposes.
    – Luis Sanz
    Commented Jun 16, 2016 at 22:03
  • 1
    thanks for your follow up. changing to ' input type="text" ' gave me the styling appearance i was looking for, for my single-line entries :)
    – ijason
    Commented Jun 27, 2016 at 7:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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