Form items inline?

By limas on 27 Jan 2006 at 19:07 UTC

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

Same here

jjeff commented 16 February 2006 at 03:43

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 =--

Progress?

ymcp commented 14 June 2006 at 20:36

Any success with this?

I added a "form-inline"

stefano@tipic.com commented 17 July 2006 at 00:54

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['.....']);

For anyone coming across this

kingandy commented 24 November 2011 at 15:57

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:

  $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}

Here's a demo of how I made inline radio buttons for Drupal 7:

carlwenrich commented 24 November 2011 at 19:49

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.

Guys you are great!

Zulde commented 8 December 2011 at 22:05

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

Once again for this ancient

saysilence commented 22 July 2012 at 22:56

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'),
  );
?>

Fields in-inline, but titles above?

Ilikejava commented 28 August 2012 at 17:33

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

CSS

kingandy commented 4 September 2012 at 08:53

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}