How to stop text-boxes in my custom block trailing past the block?

Question

I am creating a module with a custom block. Even through googling, I still could not find an answer to my question "how do you theme the elements in a form?" I think it is the fact that I don't completely understand the array elements that need to be set on each textbox.

Image of my problem: https://www.evernote.com/shard/s188/sh/3bf8cc91-5341-4c55-91ca-41e0ddbd1922/feb9698ff407e60a064f92421510059d

Answer 1

While creating this form in your custom module you set DIV class to form items which is textfield in your casy. All you will have to do is use #prefix & #sufix You will start your DIV class from #prefix before #type of form items & close the DIV at #sufix.

Here is the example

$form['first_name'] = array(
  '#prefix' => '<div class="demo-form">',
  '#title' => t('First Name'),
   '#type' => 'textfield',
  '#suffix' => '</div>',
  '#maxlength' => 128,
  '#required' => TRUE,
);

Open the CSS file or create your own at your theme folder, but if you create your own then you will have to declare it in theme.info file.

Write CSS for the class demo-form which you have applied to the form element & resize it as your wish. If you have created your own CSS file then don't forget to clear your cache.