Form text field is too wide for the side bar

Question

I created custom block for my entity and I want to add this entity creation form to the 2nd sidebar. I managed to do this and this is how it looks like now:

First textfield goes out of bounds, where as second one, which is textarea type, is okay. After looking at Form API, I realized that textarea is re-sizable and textfield is not. How can I solve this? If I put title as text area it doesn't look that nice so I would be very happy if I could stick to textfield and make it fit somehow?

Answer 1

You can use the #size attribute if you are creating the field from hook_form function in custom module.Below is the example

$form['level_of_effort'] = array(
    '#type' => 'textfield',
    '#title' => t('Level of Effort'),
    '#description' => t('Level of Effort value must be between 0 and 100.'),
   ** '#size' => 3, **
    '#maxlength' => 3,
  );

or you can do the css, using the field selector and then applying "width:in px"

Answer 2

You can change field size .Default size is 60.You can text field width by css.