/** * Sizing and focus fixes for the Select2 control inside a Gravity Forms field. * * Scoped to .gfds-post-select so nothing here touches the other Select2 controls * on the site. */ .gfds-post-select .select2-container { max-width: 100%; } /* Dropdown placement. * * The script attaches the dropdown to .ginput_container, so it is positioned * within this box rather than against the document. Select2 still writes inline * top/left from its own measurements, which is what goes wrong when the * control's geometry changes after the menu opens, so both are overridden * outright. The menu then sits directly beneath the control by construction and * cannot ride up over the input. * * Width is deliberately left to Select2's inline value rather than pinned to * 100% of this wrapper. * * This also makes Select2's --above flipping a no-op, which is deliberate: a * menu that opens upward over a multi select hides the tags the visitor has * already chosen. */ .gfds-post-select .ginput_container { position: relative; /* An overflow-clipped wrapper would cut the menu off now that it lives inside it rather than on . */ overflow: visible; } .gfds-post-select .ginput_container .select2-dropdown { position: absolute !important; top: 100% !important; left: 0 !important; /* width: 100% !important; */ z-index: 100000; } /* Keep a long result list from running off the bottom of the page. */ .gfds-post-select .select2-results > .select2-results__options { max-height: 15rem; } /* GF's own field styles set a min-height on selects that Select2 does not inherit, leaving the control noticeably shorter than sibling inputs. */ .gfds-post-select .select2-container--default .select2-selection--multiple { min-height: 2.5rem; padding: 0.15rem 0.25rem; border-color: #686e77; border-radius: 3px; } .gfds-post-select .select2-container--default.select2-container--focus .select2-selection--multiple, .gfds-post-select .select2-container--default.select2-container--open .select2-selection--multiple { border-color: #204ce5; outline: 2px solid rgba( 32, 76, 229, 0.35 ); outline-offset: 1px; } /* Long disease names should wrap inside their tag rather than force the control wider than the form. */ .gfds-post-select .select2-container--default .select2-selection--multiple .select2-selection__choice { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } /* The field fails validation like any other GF field; match GF's error colour so the control does not look untouched when the rest of the field is red. */ .gfds-post-select.gfield_error .select2-container--default .select2-selection--multiple { border-color: #c02b0a; } /* --------------------------------------------------------------------------- * Defensive rules against theme styling. * * Select2 builds its control out of ordinary elements -- a