Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

I am facing hurdles for changing the layout of simple email form module how do customize layout of this?

I am facing hurdles for changing the layout of simple email form module how do customize layout of this?

Problem

 // uses $this->_labelAlign, $this->_col2space, $this->_errorTxtColor, $this->_field, $this->_maxFields
// if $this->_field[$x]['rows'] > 0 assumes text area
public function formatRow () 
{
    $output = '';
    for ($x = 1; $x _maxFields; $x++) 
    {           
        if ($this->_field[$x]['active'] == 'Y' || $this->_field[$x]['active'] == 'R') {
            $name = 'mod_simpleemailform_field' . $x . '_' . $this->_instance;
            $value = (isset($_POST[$name])) ? htmlspecialchars($_POST[$name]) : '';
            // prevents Joomla from reformatting using javascript
            if (strpos($value, '@')) {
                $value = str_replace('@', '@', $value);
            }
            // 2011-12-03 DB: added CSS classes for input, table, row, th and td
            $row = '';
            $row .= '_trClass   . '>';
            // labels
            $row .= "_thClass    . " align='" . $this->_labelAlign . "'>" . $this->_field[$x]['label'] . "";
            // space between cols
            $row .= "_spaceClass . " width='" . $this->_col2space  . "'> ";
            // input field
            $row .= "_tdClass    . ">";
            // check to see if text area
            if ($this->_field[$x]['rows'] > 0) {
                $row .= sprintf('',
                                $name,
                                $name,
                                $this->_field[$x]['rows'],
                                $this->_field[$x]['cols'],
                                $this->_inputClass,
                                $value);
            } else {
                $row .= sprintf('',
                                $name,
                                $name,
                                $this->_field[$x]['size'],
                                $value,
                                $this->_field[$x]['maxx'],
                                $this->_inputClass);
            }
            $row .= ($this->_field[$x]['error']) 
                  ? $this->formatErrorMessage($this->_errorTxtColor, $this->_field[$x]['error']) 
                  : '';
            $row .= "";
            $row .= "\n";
            $output .= $row;
        }
    }
    return $output;
}

This is my module code for the Output which shows in table format and i don't want this type of layout as a output... I had also try to do changes with tr, td and th tag but faild to get proper out... so please if anyone help me with this.

Wrong format output what i am getting

Correct format output what i want

Problem courtesy of: Anandkumar Mehta

Solution

Ok, here goes. You have a series of

label spacer... input field

So replace the table with a

and set its width as you need in the css, i.e.

div.form-x {width:450px; padding:12px;}

Then you want to replace the cells: the first th will become a label, the first td will be dropped altogther, the second will retain only its content (i.e. input or textarea).

To make your life easier, group each couple label-input within a div so:

and in the css

div.formelement {padding:20px 0 0 0}
div.formelement label {display:block;}
div.formelement input, div.formelement textarea {width:100%}

Finally the submit button should be placed in a div with

div.submitbutton {text-align:center}

Regarding styling the input type=file, forget it. It's rendered differently by each browser, there are workarounds though but that's a different story.

Solution courtesy of: Riccardo Zorn

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

I am facing hurdles for changing the layout of simple email form module how do customize layout of this?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×