From a35188cb008924d12086b712f29fb8c64bedee0d Mon Sep 17 00:00:00 2001 From: Andrius Stonys Date: Wed, 29 Oct 2014 15:45:03 +0200 Subject: [PATCH 1/2] Add padding to select2 container displayed above Added padding to ".select2-search" container instead of margin for ".select2-search input". This fixes bug of "#select2" movement when resizing page. Steps to reproduce the bug: - open select2 so it appears above the input - resize the window Actual results: - #select2-drop moves up by 4px Expected results: - #select2-drop stays in same place --- select2.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/select2.css b/select2.css index f39cb21d..b99ff810 100644 --- a/select2.css +++ b/select2.css @@ -273,8 +273,8 @@ html[dir="rtl"] .select2-search input { background: url('select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; } -.select2-drop.select2-drop-above .select2-search input { - margin-top: 4px; +.select2-drop.select2-drop-above .select2-search { + padding-top: 4px; } .select2-search input.select2-active { From 9a689a51a0ea406d0667aaa90db9ab91bff0598b Mon Sep 17 00:00:00 2001 From: Andrius Stonys Date: Thu, 30 Oct 2014 16:26:13 +0200 Subject: [PATCH 2/2] Consistent padding for .select2-search Case: the dropdown should be shouwn above input. PositionDropdown function then operates by showing dropdown below (and ".select2-search input" has no margin, it gets the wrong dropdown size). Then in the same function calculates the top value, but doesnt take into account, that input will have the "margin-top: 4px". Thus dropdown is displayed 4px lower. Then the window resizes, the dropdown position is already correct, but then calculations (outerHeight()) get the height including the ".select2-search input" margin of 4px and thus moves the dropdown up. --- select2.css | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/select2.css b/select2.css index b99ff810..b7dba3de 100644 --- a/select2.css +++ b/select2.css @@ -180,10 +180,6 @@ html[dir="rtl"] .select2-container .select2-choice > .select2-chosen { width: auto; } -.select2-drop-auto-width .select2-search { - padding-top: 4px; -} - .select2-container .select2-choice .select2-arrow { display: inline-block; width: 18px; @@ -230,8 +226,7 @@ html[dir="rtl"] .select2-container .select2-choice .select2-arrow b { width: 100%; min-height: 26px; margin: 0; - padding-left: 4px; - padding-right: 4px; + padding: 4px 4px 0 4px; position: relative; z-index: 10000; @@ -273,10 +268,6 @@ html[dir="rtl"] .select2-search input { background: url('select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; } -.select2-drop.select2-drop-above .select2-search { - padding-top: 4px; -} - .select2-search input.select2-active { background: #fff url('select2-spinner.gif') no-repeat 100%; background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));