Difference between revisions of "How to display field values in columns"

From JReviews Documentation
Jump to: navigation, search
m
 
(One intermediate revision by one other user not shown)
Line 5: Line 5:
  
 
[[File:FieldColumns1.png]]
 
[[File:FieldColumns1.png]]
 
  
 
Instead of the values being separated by bullets, you can display them as a list in one or more columns.
 
Instead of the values being separated by bullets, you can display them as a list in one or more columns.
Line 12: Line 11:
  
 
<source lang="css">
 
<source lang="css">
ul.fieldValueList li {  
+
ul.jrFieldValueList li {  
 
     margin-right: 5px !important;  
 
     margin-right: 5px !important;  
 
     float: left;  
 
     float: left;  
 
     width: 90%;  
 
     width: 90%;  
 
}  
 
}  
ul.fieldValueList li:after{  
+
ul.jrFieldValueList li:after{  
 
     content:'';  
 
     content:'';  
 
     padding:0;  
 
     padding:0;  
Line 26: Line 25:
  
 
[[File:FieldColumns2.png]]
 
[[File:FieldColumns2.png]]
 
  
 
If you want only certain field to display in a column, add a field name in front of the selector, for example:
 
If you want only certain field to display in a column, add a field name in front of the selector, for example:
 
  
 
<source lang="css">
 
<source lang="css">
.jr_actors ul.fieldValueList li {
+
.jrActors ul.jrFieldValueList li {
 
     margin-right: 5px !important;
 
     margin-right: 5px !important;
 
     float: left;
 
     float: left;
 
     width: 90%;
 
     width: 90%;
 
}
 
}
.jr_actors ul.fieldValueList li:after{
+
.jrActors ul.jrFieldValueList li:after{
 
     content:'';
 
     content:'';
 
     padding:0;
 
     padding:0;
 
}
 
}
 
</source>
 
</source>
 
  
 
To display field values in two columns, reduce the list item width to 45%:
 
To display field values in two columns, reduce the list item width to 45%:
 
<source lang="css">
 
<source lang="css">
ul.fieldValueList li {  
+
ul.jrFieldValueList li {  
 
     margin-right: 5px !important;  
 
     margin-right: 5px !important;  
 
     float: left;  
 
     float: left;  
 
     width: 45%;  
 
     width: 45%;  
 
}  
 
}  
ul.fieldValueList li:after{  
+
ul.jrFieldValueList li:after{  
 
     content:'';  
 
     content:'';  
 
     padding:0;  
 
     padding:0;  

Latest revision as of 14:52, 27 July 2013

With Multiple Select List and Checkbox custom field types, the fields can have many values. On the listing detail page those values are displayed in the same line separated by bullets.

Example:

FieldColumns1.png

Instead of the values being separated by bullets, you can display them as a list in one or more columns.

To do that, add this code to the custom_styles.css file in your theme:

ul.jrFieldValueList li { 
    margin-right: 5px !important; 
    float: left; 
    width: 90%; 
} 
ul.jrFieldValueList li:after{ 
    content:''; 
    padding:0; 
}

Field values now look like this:

FieldColumns2.png

If you want only certain field to display in a column, add a field name in front of the selector, for example:

.jrActors ul.jrFieldValueList li {
    margin-right: 5px !important;
    float: left;
    width: 90%;
}
.jrActors ul.jrFieldValueList li:after{
    content:'';
    padding:0;
}

To display field values in two columns, reduce the list item width to 45%:

ul.jrFieldValueList li { 
    margin-right: 5px !important; 
    float: left; 
    width: 45%; 
} 
ul.jrFieldValueList li:after{ 
    content:''; 
    padding:0; 
}


Now it looks like this:

FieldColumns3.png


To display field values in three columns, decrease the width to around 30%.

Percentages depend on the css of your Joomla template. Use Firebug to find the best value.