Is it posibele to render form elements in a table?

6 replies [Last post]
marshallexcavating
Offline
Last seen: 8 years 22 weeks ago
Joined: 2011-02-03

I am trying to build a calculator module in drupal7 (https://buildamodule.com/forum/post/how-to-build-a-js-calculator-on-a-dr...). I would like to present each calculator form element(buttons, text, etc.) in a table array on a page/node. Is this possible in drupal7?

I have been looking all over the Drupal form api and on the web for examples of "forms rendered in tables" with out any luck.

Thank you for any clues/info,

Chris Shattuck
Offline
Last seen: 10 weeks 3 days ago
Joined: 2009-08-16
It's possible through a form

It's possible through a form theme function, though you might have a simpler time just using CSS to style the form labels. The method I typically use is to set the label element to a block and float it to the left, like so:

#formid .label {
  float:left;
  display:block;
  text-align:right;
  width:200px
}

And then set the padding on the left of the form elements to a particular width, like so:

#formid .form-input {
  padding-left: 200px;
}

You might have to do some finagling with getting all the elements to line up, and the label element for checkboxes are a little different, but hopefully this points you in the right direction.

If you are new to CSS, this might take a bit to wrap your mind around, but it's a good technique to learn. Also, if you're not using Firebug, definitely look into that for identifying which selectors you should be using.

Cheers!
Chris

marshallexcavating
Offline
Last seen: 8 years 22 weeks ago
Joined: 2011-02-03
Chris, I have been

Chris, I have been studying/watching your "08. How to Add to and Manipulate the Theme Layer" videos in a atempt to implement form eliments in to a table. Your "04hd-how-to-theme-tables-and-the-essence-of-theming.mp4" video explains how to build a simple table but I am unable to implement form elements in to a table from this technique/method. Is there more documentation that you know of that is available to look over?

In your previous comment you state:

though you might have a simpler time just using CSS to style the form labels"

I am unclear where to apply this css in Drupal. Should I follow the direction of our "08hd-how-to-add-css-files-in-theme-functions-and-template-fi.mp4" video to proceed with this strategy or is there a way to apply the css in the module File directuly?

Thank you for you insight,

Craig

Chris Shattuck
Offline
Last seen: 10 weeks 3 days ago
Joined: 2009-08-16
Hi Craig, If the CSS is the

Hi Craig,

If the CSS is the answer for you, then you would need to add a CSS file via your theme or through a module.

You pointed to the right video for adding CSS through a CSS file, which is what I would suggest:

How to add CSS files in theme functions and template files

You can also use the 'inline' option in drupal_add_css() to add it directly on the page, but it's typically better to us a file.

And here's how to do it through the theme layer:

How to add a CSS file

Let me know if you're able to get that sorted out. If you're new to CSS, there could be a bit of a learning curve here as you figure out the various CSS properties.

Good luck!
Chris

marshallexcavating
Offline
Last seen: 8 years 22 weeks ago
Joined: 2011-02-03
One stratigy to render form eliments in a table.

I have found one way to render form elements in a table using the (#prefix, #suffix) with in hook_form.

Here is a example in my module:

function calculator_form($form, &$form_submit){

        $form['description'] = array(
            '#type' => 'item',
          '#title' => t('This is a simple calculator to determin Weight from Volume and Density'),
        );
         
$form['name'] = array(
'#type' => 'fieldset',
'#title' => t('Name'),
// Make the fieldset collapsible.
'#collapsible' => TRUE, // Added
'#collapsed' => FALSE,  // Added

);

       $form['name']['volume'] = array(
           '#type' => 'textfield',
         '#title' => t('Volume of material:'),
           '#default_value' => '1',
            '#size' => 10,
'#prefix' => '<table border=0 cellspacing=30 celladding=30><tr><td><center>',
'#suffix' => '</center></td>',

        );
         
       $form['name']['volume_units'] = array(
         '#type' => 'select',
            '#title' => t('Volum units:'),
          '#options' => array('guitar','piano','hiking','twitting','other'),
          '#prefix' => '<td>',
'#suffix' => '</td>',
       );
         
       $form['name']['density'] = array(
          '#type' => 'textfield',
         '#title' => t('Density of material:'),
          '#default_value' => '2',
            '#size' => 10,
'#prefix' => '<td><center>',
'#suffix' => '</center></td>',

         );
         $form['name']['dencity_units'] = array(
            '#type' => 'select',
            '#title' => t('Density units:'),
            '#options' => array('guitar','piano','hiking','twitting','other'),
'#prefix' => '<td>',
'#suffix' => '</td></tr>',
      );
 
          $form['name']['submit'] = array(
           '#type' => 'submit',
            '#value' => 'Calculate Weight',
         //'#value' => 'submit',
'#prefix' => '<tr><td colspan="4">',
'#suffix' => '</td></tr>',

            );
         
               $form['name']['tital cell'] = array(
'#prefix' => '<tr><td colspan="2"><center><font face="Courier" size="5"><b>Calculated Weight =</b></font>',
'#suffix' => '</td></center>',
          );      
       
       $form['name']['results'] = array(
      '#type' => 'item',
          '#size' => 10,
            '#markup' => 'This is where resuls will display.',
'#prefix' => '<td><center>',
'#suffix' => '</td></center>',
            );
         
           $form['name']['results_units'] = array(
            '#type' => 'select',
            '#title' => t('Results units:'),
            '#options' => array('guitar','piano','hiking','twitting','other'),
'#prefix' => '<td>',
'#suffix' => '</center></td></tr></table>',
     );
return $form;
}

The documentation for this is week in the Drupal API; if anybody has a better example of rendering form elements in a table I would like to see them.

Thank you

marshallexcavating
Offline
Last seen: 8 years 22 weeks ago
Joined: 2011-02-03
Chris, Thank you for you

Chris, Thank you for you comments above concerning forms in tables. In order for me to finally under stand what you where saying I had to watch your CD on "Theming Essentials". For me your two CDs "Core Concepts" and "Theming Essentials" are helpful to understanding Drupal globally.

Craig

Chris Shattuck
Offline
Last seen: 10 weeks 3 days ago
Joined: 2009-08-16
Nice work, Craig, and thanks

Nice work, Craig, and thanks for reporting back! I'm glad you were able to get it figured out.

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.