0

I am building an autoresponder-like form that fits a block.

So far i've added title, a body, two input (name and email) and submit button.

While the body feels right and uses the space in the right way, the input boxes bleed out of the block, and are very ugly to see, while the button is aligned to the left.

I've temporaly solved the issue giving "width: 95%;" to both input and "width: 100%;" to the submit button, and allowed the user to change the styles on the configuration page. Unfortunately, this feels a little amateur to me, and I would like to make the form more smart about the space available inside the block. One thing more, I am looking for a solution that does not care of the theme beign used.

  $form['my_name'] = array(
    '#type' => 'textfield',
    '#required' => TRUE,
    '#title' => t("Name"),
    '#attributes' => array('style' => $style_name),
  );
  $form['my_email'] = array(
    '#type' => 'textfield',
    '#required' => TRUE,
    '#title' => t("Email"),
    '#attributes' => array('style' => $style_email),
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t($submit_button),
    '#attributes' => array('style' => $style_submit),
  );

As I said above, $style_name and $style_email are defaulted to "width:95%" and $style_submit is defaulted to "width:100%". The items are at least inside the block box, but they are still quite ugly from a design point of view.

As clive pointed out, maybe the solution can be only html/css based, but the issue to me feels quite Drupal specific.

For example, here a screenshot of a drupal form inside a block without any attribute set: default behavior of a form inside a block

To me, this feels way wrong. If I build a form inside a sidebar on Wordpress, all the items stay inside the content area of the sidebar, without bleeding out, as it feels to me logical to happen.

There is no better solution other than the css/width trick to make this better? Btw the issue stays to matter what theme is used.

  • We can't help you with your visuals here I'm afraid, CSS/HTML markup and design considerations aren't related to Drupal. It looks like you already know how to add the necessary markup/class changes, so from here you just need to decide what your markup should look like, and what styles you should use – Clive Jun 17 '14 at 14:21
  • I've tried to make the question more drupal centric and less html/css centric – Terix Jun 17 '14 at 15:55
  • 1
    Thanks for the update, hopefully there will be a Drupal solution to this – Clive Jun 17 '14 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.