Just started with 4.7....

I am porting a custom module right now. No problems with the new Form API so far except for inlining form items in edit mode.

What I am trying to achieve is:

Zip: [       ]  City: [                     ]

Is there a #prefix / #suffix to span form items so I can alter the css def of form-item to inline ?

<div class="container-inline">
[..] // zip and city fields
</div>

where css def would be

.container-inline .form-item
{
    display:inline;
}

I searched the forums but no luck. Maybe I just used the wrong search keys.

Just started with 4.7....

I am porting a custom module right now. No problems with the new Form API so far except for inlining form items in edit mode.

What I am trying to achieve is:

Zip: [       ]  City: [                     ]

Is there a #prefix / #suffix to span form items so I can alter the css def of form-item to inline ?

<div class="container-inline">
[..] // zip and city fields
</div>

where css def would be

.container-inline .form-item
{
    display:inline;
}

I searched the forums but no luck. Maybe I just used the wrong search keys.

Comments

jjeff’s picture

I've been trying to track this one down too. What I've found is that the "label" fields aren't converting to inline like the divs. You'll find that if you omit the labels (a.k.a. #title), then the form elements will go inline.

I'll let you know if I find out more.

--= Jeff Robbins | www.lullabot.com =--

--= Jeff Robbins | Lullabot =--

ymcp’s picture

Any success with this?

stefano@tipic.com’s picture

I added a "form-inline" class in my style.css:

.form-inline .form-item {
  float: left;
  margin-right: 15px;
}

In my custom phptemplate.inc (included in phptemplate.engine) I added the following function:

function theme_form_inline() {
  $output = '<div class="form-inline">';

  $args = func_get_args();
  foreach($args as $arg) $output .= form_render($arg);

  $output .= '</div>';
  $output .= '<div style="clear:both;"></div>';
  return $output;
}

To get form elements displayed inline I call the above function this way:

$output = theme_form_inline($form['.....'], $form['.....'], $form['.....']);
kingandy’s picture

For anyone coming across this (somewhat ancient) discussion now - Drupal 7's default CSS includes a 'container-inline' class which will prompt any child DIVs or LABELs to be rendered inline (barring interference from other stylesheets).

Which is nice.

Under the Forms API this can be implemented like so:

<?php
  $form
['container'] = array(
   
'#prefix' => '<div class="container-inline">',
   
'child_element_1' = array(...),
   
'child_element_2' = array(...),
   
'#suffix' => '</div>',
  );
?>

++Andy
Developing Drupal websites for Livelink New Media since 2008

carlwenrich’s picture

the demo: http://aswapathy.com/d79de/irb

the css:

div.form-type-radio {
  display: inline;
  margin: 10px;
}

the php:

function irb($form, &$form_state) {
  $form['#attached']['css'] = array(
    drupal_get_path('module', 'irb') . '/irb.css',
  );
  $options = array(t('One'), t('Two'), t('Three'));
  $form['radios'] = array(
    '#type' => 'radios',
    '#options' => drupal_map_assoc($options),
  );
  $form['br'] = array(
    '#markup' => '<br />',
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );
  return $form;
}

You can use the "Contact Carl" menu option on the site if you have any questions.

Zulde’s picture

Although this is an ancient thread, thanks for the help! Those last answers helped meg out!

saysilence’s picture

Once again for this ancient post:

<?php
// define a container just like you would define fieldset, now every child of this container will be inline.
 
$form['container'] = array(
   
'#type' => 'container',
   
'#attributes' => array(
       
'class' => array('container-inline'),
    ),
    );

// for ex: Inline buttons.
 
$form['container']['ok'] = array(
       
'#type' => 'submit',
       
'#value' => t('Apply'),
  );
 
$form['container']['cancel'] = array(
       
'#type' => 'submit',
       
'#value' => t('cancel'),
  );
?>
Ilikejava’s picture

I am starting to get my fingers around D7, but have not been able to figure out how to get a form to display the fields in-line, but keeping the titles above. A snippet from my code is below, but it produces:

First Name [ ] Last Name []

$form['user_name'] = array(
'#title' => t(''),
'#type' => 'fieldset',
'#attributes' => array('class' => array('container-inline')),
);

What I am trying to achieve is:

First Name Last Name
[ ] []

Phone
[ ]

Email
[ ]

etc.

Thanks

There is nothing in the world you can't fix with 3rd normal form...

kingandy’s picture

I think you'd need to approach this with CSS ... the form items should have a wrapping element around the label and field, you can either float them left or make them display: inline-block. Then, within the wrapper, just have the labels display as a block as normal.

Here's a brief example, though naturally you'd have to look up the exact classes or IDs needed to identify the specific form items you want to style:

<div class="form-item form-item-lined-up"><label>Label 1</label><input type="text"></div>
<div class="form-item form-item-lined-up"><label>Label 2</label><input type="text"></div>

<style>
  .form-item-lined-up {
    display: inline-block;
  }
</style>

++Andy
Developing Drupal websites for Livelink New Media since 2008

akari.outlook’s picture

as titled?

sunly917’s picture

works great. thank you.

SUN's