Display Files in Reverse Order

Instructions

  1. Add the following code to your theme’s stylesheet or wherever you include custom CSS.
  2. Add the “gpfup-reverse-order” class to your File Upload field’s CSS Class Name setting.

Code

Filename: gpfup-reverse-file-order.css

/**
 * Gravity Perks // File Upload Pro // Display Files in Reverse Order
 * https://gravitywiz.com/documentation/gravity-forms-file-upload-pro/
 *
 * Instructions:
 *
 * 1. Add the following code to your theme's stylesheet or wherever you include custom CSS.
 * 2. Add the "gpfup-reverse-order" class to your File Upload field's CSS Class Name setting.
 */
.gpfup-reverse-order .gpfup__files {
	display: flex;
	flex-direction: column-reverse;
}

.gpfup-reverse-order .gpfup__files li {
	flex: 0 0 auto;
}

.gpfup-reverse-order .gpfup__file {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.15 );
}

.gpfup-reverse-order .gpfup__file:first-of-type {
	border: 0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.