Position Dropdown Statically

If your form container is configured to hide overflowing content and your Advanced-Select-enabled field is near the bottom of the form, the dropdown can be cutoff when the field is selected.

This snippet positions the dropdown statically (default is absolute) so that it pushes the form content down instead of floating above it.

Instructions

  1. Include this CSS snippet in your theme’s stylesheet or wherever you include custom CSS code.
  2. Add the “gpadvs-static” class to the Custom CSS Class field setting to enable this for a field.

Code

Filename: gpadvs-position-dropdown-statically.css

/**
 * Gravity Perks // Advanced Select // Position Dropdown Statically
 * https://gravitywiz.com/documentation/gravity-forms-advanced-select/
 *
 * If your form container is configured to hide overflowing content and your Advanced-Select-enabled field
 * is near the bottom of the form, the dropdown can be cutoff when the field is selected.
 *
 * This snippet positions the dropdown statically (default is absolute) so that it pushes the form content
 * down instead of floating above it.
 *
 * Instructions:
 *
 * 1. Include this CSS snippet in your theme's stylesheet or wherever you include custom CSS code.
 * 2. Add the "gpadvs-static" class to the Custom CSS Class field setting to enable this for a field.
 */
.gpadvs-static .ts-wrapper {
	flex-wrap: wrap;
}

.gpadvs-static .ts-dropdown {
	position: static !important;
	transform: none !important;
}

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.