Change field order frontend and submit form

[JoshLewis]

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.
  
  
   
• 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 September 12, 2019 at 09:29 PM by JoshLewis