From 80425d9f08aaf1ed8944a194ea4b292c9af92e2d Mon Sep 17 00:00:00 2001 From: Nathaniel Taintor Date: Wed, 28 Jun 2017 20:04:05 -0700 Subject: [PATCH] Use select2 dropdownParent attr for css targetting When interacting with a select2 field, this attaches the dropdown container as a child of the attribute field view, using the `dropdownParent` option in select2. This allows us to target the specific fields that we need to style with css using parent selectors, without resorting to hacks like trying to set a classname on the container element when it's created. --- css/sass/_select2-fields.scss | 13 ++++--------- css/shortcode-ui.css | 13 +++++-------- css/shortcode-ui.css.map | 2 +- js/build/shortcode-ui.js | 1 + js/src/views/select2-field.js | 1 + 5 files changed, 12 insertions(+), 18 deletions(-) diff --git a/css/sass/_select2-fields.scss b/css/sass/_select2-fields.scss index a06547b5..2643352a 100644 --- a/css/sass/_select2-fields.scss +++ b/css/sass/_select2-fields.scss @@ -1,5 +1,7 @@ .edit-shortcode-form { .select2-container { + z-index: 160000; // Make sure Select2 UI is visible above media modal + width: 300px; min-width: 300px; } @@ -8,7 +10,8 @@ -webkit-transition: none; } - .select2-drop { + .select2-dropdown { + transform: translateY(-2px); // Account for container border radius in select2--default theme z-index: 160001; } @@ -40,11 +43,3 @@ } -.select2-container { - z-index: 160000; // Make sure Select2 UI is visible above media modal - max-width: 300px; -} - -.select2-results li { - margin: 0; -} diff --git a/css/shortcode-ui.css b/css/shortcode-ui.css index 5da2cdc5..87548448 100644 --- a/css/shortcode-ui.css +++ b/css/shortcode-ui.css @@ -209,13 +209,17 @@ margin-left: 60px; } } .edit-shortcode-form .select2-container { + z-index: 160000; + width: 300px; min-width: 300px; } .edit-shortcode-form .select2-container a { transition: none; -webkit-transition: none; } -.edit-shortcode-form .select2-drop { +.edit-shortcode-form .select2-dropdown { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); z-index: 160001; } .edit-shortcode-form .select2 li { @@ -238,11 +242,4 @@ .edit-shortcode-form .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #5b9dd9; box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); } - -.select2-container { - z-index: 160000; - max-width: 300px; } - -.select2-results li { - margin: 0; } /*# sourceMappingURL=shortcode-ui.css.map */ \ No newline at end of file diff --git a/css/shortcode-ui.css.map b/css/shortcode-ui.css.map index f54c6e55..7d94ece3 100644 --- a/css/shortcode-ui.css.map +++ b/css/shortcode-ui.css.map @@ -1 +1 @@ -{"version":3,"sources":["sass/shortcode-ui.scss","sass/_field-image.scss","sass/_select2-fields.scss"],"names":[],"mappings":"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","file":"shortcode-ui.css"} \ No newline at end of file +{"version":3,"sources":["sass/shortcode-ui.scss","sass/_field-image.scss","sass/_select2-fields.scss"],"names":[],"mappings":"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","file":"shortcode-ui.css"} \ No newline at end of file diff --git a/js/build/shortcode-ui.js b/js/build/shortcode-ui.js index 1b50d79c..8bdea15b 100644 --- a/js/build/shortcode-ui.js +++ b/js/build/shortcode-ui.js @@ -1837,6 +1837,7 @@ sui.views.editAttributeSelect2Field = sui.views.editAttributeField.extend( { var $fieldSelect2 = $field[ shortcodeUIData.select2_handle ]({ placeholder: "Search", multiple: this.model.get( 'multiple' ), + dropdownParent: this.$el, ajax: { url: ajaxurl, diff --git a/js/src/views/select2-field.js b/js/src/views/select2-field.js index 5ef5c860..ece037d6 100644 --- a/js/src/views/select2-field.js +++ b/js/src/views/select2-field.js @@ -106,6 +106,7 @@ sui.views.editAttributeSelect2Field = sui.views.editAttributeField.extend( { var $fieldSelect2 = $field[ shortcodeUIData.select2_handle ]({ placeholder: "Search", multiple: this.model.get( 'multiple' ), + dropdownParent: this.$el, ajax: { url: ajaxurl,