Jump to content

Change field order frontend and submit form


JoshLewis

Recommended Posts

Created an easy way to re-arrange any JReviews field for both the detail view and edit form using the following CSS:

#group_common {
    display: flex !important;
    flex-flow: column;
}

.jrFieldDiv.jrCountry {
    order: 1;
}

.jrFieldDiv.jrState {
    order: 2;
}

.jrFieldDiv.jrCity {
    order: 3;
}

Few things to note:

  • You will need to place it in your template.css or override location so that it can load the CSS. If you want to load it inline simply wrap it in a <style></style> tag.
  • .jrFieldDiv.jrName will need to have the text after "jr" replaced with the field name and start with a capital letter. If you are unsure, check your JReviews fields. If you still cannot get the class name simply open an element inspector (add your browser name after the search text) in developer tools and click the field you need a class for. Replace jrState (or other fields) with the class of your field.

    929152934_customfields.png.4959c32ba5840ff919200887136aadf1.png
     
  • You should fill out all the fields "order" for proper re-arrangement to generate a consistent result.
  • On my end this did not tamper with the listing display. Depending on your theme having the flex property may produce a stretched or consolidated result which can probably be solved with a little more CSS.
     

The big advantage here is that it uses minimal code, easy to use, very easy to maintain, and does not require any overrides. The only draw back is that ancient browsers will not respect it (they will display as if this code wasn't there). Here are more styling tips with JReviews and flexbox:

 

Edited by JoshLewis
Link to post
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.