sizing the fields in the table | Formidable Plus | Forum

This forum requires Javascript to be enabled for posting content

 

You must be logged in to post
Login

Lost Your Password?

Search Forums:

 










Minimum search word length is 4 characters – Maximum search word length is 84 characters
Wildcard Usage:
*  matches any number of characters    %  matches exactly one character

sizing the fields in the table

No Tags
User Post

12:35 am
June 13, 2012

LeslieBarry

Member

posts 4

Post edited 2:03 am – June 13, 2012 by GetViable


In your demo: http://topquark.com/demo/formidable-plus/

you have sized the <textarea> to fit the cell nicely. How have you done this?

 

To clarify, I understand that this will be done with CSS, I am just unsure how. 

 

I would also like to understand what CSS I need to add to my theme to change the colours of the lines and the backgrounds to the table.

Thanks.

7:18 am
June 13, 2012

Top Quark

Barrie, ON

Member

posts 179

Post edited 7:24 am – June 13, 2012 by Top Quark


Hi there,

I didn’t actually do anything special to make them fit.  You can affect the width with a statement like:

.with_frm_style textarea {
     width: 200px; /* or auto or 150px or whatever */
}

Or, for the textareas in a Formidable Plus specific table and column (change the 84 to your table ID and column-1 to the column number you want to affect – note, the first column is .column-0}:

#frm-table-84 .column-1 textarea{
     width:250px;
}

As for the colour of the border lines, do this:

.frm-table td, .frm-table th{
    border-color:#123456;
}

Cheers
Trevor

10:38 pm
June 18, 2012

LeslieBarry

Member

posts 4

Thanks, Trevor – this worked a treat.

11:25 am
June 19, 2012

Top Quark

Barrie, ON

Member

posts 179

Great!

T

10:38 pm
November 8, 2012

KennethCline

Member

posts 4

I found this doesn't work for input fields because they have size=”10″ and class=”auto-width table-cell” attributes specified in table-field.php. I worked around this problem by doing the following:

// echo '<input type="text" size="10" id="'.$this_field_id.'" name="'.$this_field_name.'[]" value="'.esc_attr($value).'" class="auto_width table-cell" />'."\n";
		switch($field['field_key']) {	// switch based on the field name of the table
			case 'animal_info':		// The animal_info table on the New Animal form
				switch($col_num) {
					case '0':		// column-0 is the "Name" column
						$my_size = '40';
						break;
					case '2':		// column-2 is the "Description" column
						$my_size = '60';
						break;
					default:
						$my_size = '25';
				default:
					$my_size = '25';
					break;
				}	// switch($col_num)
				break;
			default:
				$my_size = '25';
				break;
		}	// switch($field_name)
		echo '<input type="text" size="'.$my_size.'" id="'.$this_field_id.'" name="'.$this_field_name.'[]" value="'.esc_attr($value).'" class="table-cell" />'."\n";
 
This allows me to limit it to the table I'm interested in (animal_info) and I can set a unique size per column. Not ideal - would be nice to have it exposed in 
the front-end, and my changes won't survive an update, but hey - it gets the job done for now.
 
Trevor - is there a better way to do this???

10:16 am
November 23, 2012

Top Quark

Barrie, ON

Member

posts 179

Hi Kenneth,

You could use a quick jQuery function to do this.  Something like:

jQuery(function($){
 if ($('#my-table-id').length){ // If the table in question is on the page
 $('#my-table-id .column-0').find('input').each(function(){
 $(this).attr('size',40);
 });
 $('#my-table-id .column-2').find('input').each(function(){
 $(this).attr('size',60);
 });
 // ... etc.
 }
});
No Tags
© Simple:Press