How do you set the height of a text input box?


#1

I’m using the web demo version and I can’t seem to set the height of text inputs. I see the option to set with but wether I set it to 400x20 or 400x100, the height remains the same.

I can change the font size and that does change the height–but only if there is text in the input box. Of course, we usually don’t have text in the input boxes.

Is this a defect? If so, is there a workaround?


#2

Hi @D_A!

Try using the “Text Area” control, this will allow you to set a height and width. :smile:

Hope that hopes!


#3

That sounds like a good workaround for now. Fair to say that the text input has a bug that needs fixing?


#4

Yeah, I think it may have been an oversight. Seems like the controls are based on HTML form tags, <textarea> being multiline and <input> being single line. But, to your point, yes you should be able to increase the height based on the font size of your single line input. :smiley:


#5

The catch with setting the type size is that you need to have type in the input field, which isn’t usually the case.

I can work with the text field workaround! (But also hope Balsamiq figures out the text input height bug!)


#6

Hi, @D_A. The text input’s height property isn’t a bug, but a fixed property by design. Textarea would work better if you want to adjust the height.

With a lot of controls the idea with Mockups is to use sensible defaults since it’s focussed on rapid ideation over specifying properties related to visual design and precise layout.


#7

I agree on rapid ideation, but I’d also argue that the current default isn’t sensible given mobile and the trend towards large form elements.

Plus, given that it’s an editable option, I’d argue it is a bug at least in terms of what the user is expecting (I expect an editable option would affect the object).

As such, I’d strongly suggest that this be considered as perhaps a future update. Even for paper prototyping, when our form elements are half the size in relation to our labels that they’d be in the actual designs, it causes some issues.


#8

Cool. For what it’s worth, we’ve also debated dropping the Input in favor of only a single input/textarea control. But I’ll add your request to the tracker. I understand where you’re coming from.


#9

Thanks, Mike. I appreciate it!


#10

I’ve found that changing the font size will change the height of the text input box even if there’s no text in the box. And if you need a height that’s not afforded by the sizes available in the font-size dropdown, {size:nn} {size} (note the space) will do the trick.


#11

I agree with D_A. It’s frustrating that you can’t change the height of an input control.

An input/textarea control is an option (as Mike pointed out) but how would you handle the vertical text alignment? For example, when I try to use a textarea to increase the height, the text stays at the top:

That said, I would suggest just keeping them separate. So the textarea would stay as is but text inputs can now have their height adjusted (and vertically align its text to the middle).

What do you guys think?

Larry


#12

Hi @Larry_Azevedo,

Sorry for the hassle with this.

Another workaround would be to use the Shape control as it center aligns the text vertically. See the result below.

Please let me know if that works for you!

Thanks for your feedback :smile:


#13

Users of Balsamiq accept workarounds but only if it solves more complex scenarios. This is not a complex scenario. Users expect the text to be vertically centered. This is basic behavior and should have been done in version 1.

Larry