Difference between revisions of "Customizing the layout of custom fields on listing submit page"

From JReviews Documentation
Jump to: navigation, search
(Created page with 'In this tutorial we'll show you how to display certain custom fields in the same row on the listing submit form. By default, custom fields are outputted one per row, like this: …')
 
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
In this tutorial we'll show you how to display certain custom fields in the same row on the listing submit form.
+
This article will show you how to display certain custom fields in the same row on the listing submit form.
  
 
By default, custom fields are outputted one per row, like this:
 
By default, custom fields are outputted one per row, like this:
  
 +
[[File:SubmitFields.png]]
  
 +
Sometimes it is a good idea to display related custom fields in one row. We can do that using css because each field container has its name as class: "jrFieldDiv jrFieldname".
  
−
If you have a lot of custom fields, the form can become very long.  
+
In this example we'll make jr_country, jr_state and jr_city fields to display in one row.
  
−
We can make the fields display in the same row using css, but first we need to add a unique class to each field container div.
+
Add all styles to <span style="color: blue">custom_styles.css</span> file in your theme.
 +
 
 +
The first field in the row be floated like this:
 +
<source lang="css">
 +
.jrForm .jrFieldDiv.jrCountry {
 +
    float: left;
 +
}
 +
</source>
  
−
Open this file:
 
−
*<span style="color: blue">\com_jreviews\jreviews\views\helpers\custom_fields.php</span>
 
  
−
and replace this line (line 433):
+
For the second and third field we'll use this to output them in the same row as first field:
−
<source lang="php">
+
<source lang="css">
−
$inputs["data[Field][$fieldLocation][$key]"]['div'] = 'jr_fieldDiv';
+
.jrForm .jrFieldDiv.jrState,
 +
.jrForm .jrFieldDiv.jrCity {
 +
    float: left;
 +
    clear: none;
 +
    margin-left: 30px;
 +
}
 
</source>
 
</source>
  
−
with this one:
+
 
−
<source lang="php">
+
And then we should make the 4th field to start from a new row:
−
$inputs["data[Field][$fieldLocation][$key]"]['div'] = 'jr_fieldDiv ' . $value['name'];
+
<source lang="css">
 +
.jrForm .jrFieldDiv.jrAddress {
 +
    clear: left;
 +
}
 
</source>
 
</source>
  
  
−
Now every field container div will have this class: "jr_fieldDiv jr_fieldname".
+
 
 +
Now the fields are displayed like this:
 +
 
 +
[[File:SubmitFields2.png]]
 +
 
 +
 
 +
 
  
  
−
Next we'll align the fields by adding styles in this css file:
+
[[Category:JReviews]]
−
*<span style="color: blue">\com_jreviews\jreviews\views\themes\default\theme_css\form.css</span>
+
[[Category:Themes]]
 +
[[Category:Submissions]]
 +
[[Category:Forms]]
 +
[[Category:Fields]]

Latest revision as of 14:03, 14 August 2013

This article will show you how to display certain custom fields in the same row on the listing submit form.

By default, custom fields are outputted one per row, like this:

SubmitFields.png

Sometimes it is a good idea to display related custom fields in one row. We can do that using css because each field container has its name as class: "jrFieldDiv jrFieldname".

In this example we'll make jr_country, jr_state and jr_city fields to display in one row.

Add all styles to custom_styles.css file in your theme.

The first field in the row be floated like this: 

.jrForm .jrFieldDiv.jrCountry {
    float: left;
}


For the second and third field we'll use this to output them in the same row as first field: 

.jrForm .jrFieldDiv.jrState,
.jrForm .jrFieldDiv.jrCity {
    float: left;
    clear: none;
    margin-left: 30px;
}


And then we should make the 4th field to start from a new row: 

.jrForm .jrFieldDiv.jrAddress {
    clear: left;
}


Now the fields are displayed like this:

SubmitFields2.png

Retrieved from "https://docs.jreviews.com/index.php?title=Customizing_the_layout_of_custom_fields_on_listing_submit_page&oldid=2783"