drop down issues

src/common-styles/sv-list.scss

@@ -13,17 +13,17 @@
   width: 100%;
   font-family: $font-family;
   box-sizing: border-box;
-  padding: calcSize(1.5) calcSize(8);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  padding: calcSize(1.5);
 }
 
 .sv-list__empty-text {
   line-height: calcLineHeight(1.5);
   font-size: calcFontSize(1);
   font-weight: 400;
   text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: $foreground-light;
 }
 

src/common-styles/sv-popup.scss

@@ -23,6 +23,7 @@ sv-popup {
 }
 
 .sv-popup__container {
+  background-color: $background-dim;
   box-shadow: $shadow-large;
   border-radius: calcCornerRadius(1);
   position: absolute;
@@ -56,10 +57,20 @@ sv-popup {
 
   padding: calcSize(11) calcSize(15);
   box-sizing: border-box;
+}
 
-  .sv-popup__body-content {
-    padding: calcSize(4);
-    height: auto;
+.sv-popup--modal > .sv-popup__container {
+  position: static;
+}
+
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  box-shadow: $shadow-large;
+  background-color: $background-dim-light;
+  padding: calcSize(4);
+  height: auto;
+
+  .sv-popup__body-footer {
+    padding-bottom: 2px;
   }
 }
 
@@ -102,10 +113,6 @@ sv-popup {
   }
 }
 
-.sv-popup--modal>.sv-popup__container {
-  position: static;
-}
-
 .sv-popup--overlay {
   width: 100%;
   height: $popup-overlay-height;
@@ -286,6 +293,10 @@ sv-popup {
   }
 }
 
+.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content .sv-list {
+  background-color: transparent;
+}
+
 .sv-dropdown-popup {
   .sv-popup__body-content {
     padding: calcSize(0.5) 0;
@@ -296,17 +307,6 @@ sv-popup {
   }
 }
 
-.sv-popup--modal {
-  .sv-popup__body-content {
-    box-shadow: $shadow-large;
-    background-color: $background-dim-light;
-  }
-
-  .sv-popup__body-footer {
-    padding-bottom: 2px;
-  }
-}
-
 .sv-popup--overlay {
   .sv-popup__body-content {
     background-color: $background-dim;

visualRegressionTests/tests/defaultV2/dropdown.ts

@@ -427,6 +427,8 @@ frameworks.forEach(framework => {
         .typeText(".sd-dropdown__filter-string-input", "test")
         .wait(100);
       await takeElementScreenshot("dropdown-empty-list.png", popupContainer, t, comparer);
+      await t.resizeWindow(300, 500);
+      await takeElementScreenshot("dropdown-small-window-empty-list.png", popupContainer, t, comparer);
     });
   });
 

visualRegressionTests/tests/defaultV2/themes.ts

@@ -1,5 +1,6 @@
 import { Selector, ClientFunction } from "testcafe";
 import { url, frameworks, initSurvey, url_test, takeElementScreenshot, wrapVisualTest } from "../../helper";
+import { getListItemByText } from "../../../testCafe/helper";
 
 const title = "Survey themes Screenshot";
 
@@ -292,4 +293,37 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-theme-editorfont-placeholdercolor.png", Selector(".sd-root-modern"), t, comparer);
     });
   });
+
+  test("Check dropdown element colors", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(800, 1600);
+      await initSurvey(framework, {
+        "elements": [
+          {
+            "type": "dropdown",
+            "name": "dropdown",
+            "defaultValue": "Item 1",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "cssVariables": {
+            "--sjs-general-backcolor": "rgba(255, 255, 255, 0.25)", "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)", "--sjs-general-backcolor-dim": "#1846A5", "--sjs-general-backcolor-dim-light": "rgba(255, 255, 255, 0.99)", "--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)", "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)", "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)", "--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)", "--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)", "--sjs-primary-backcolor": "rgba(24, 70, 165, 1)", "--sjs-primary-backcolor-light": "rgba(24, 70, 165, 0.1)", "--sjs-primary-backcolor-dark": "rgba(22, 64, 150, 1)", "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)", "--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)", "--sjs-base-unit": "8px", "--sjs-corner-radius": "4px", "--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)", "--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)", "--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)", "--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)", "--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)", "--sjs-shadow-small": "0px 0px 0px 0px rgba(0, 0, 0, 0)", "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)", "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)", "--sjs-shadow-inner": "0px 0px 0px 0px rgba(0, 0, 0, 0)", "--sjs-border-light": "rgba(24, 70, 165, 0.15)", "--sjs-border-default": "rgba(0, 0, 0, 0.25)", "--sjs-border-inside": "rgba(0, 0, 0, 0.16)", "--sjs-special-red": "rgba(229, 10, 62, 1)", "--sjs-special-red-light": "rgba(229, 10, 62, 0.1)", "--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)", "--sjs-special-green": "rgba(25, 179, 148, 1)", "--sjs-special-green-light": "rgba(25, 179, 148, 0.1)", "--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)", "--sjs-special-blue": "rgba(67, 127, 217, 1)", "--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)", "--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)", "--sjs-special-yellow": "rgba(255, 152, 20, 1)", "--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)", "--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)", "--sjs-article-font-xx-large-textDecoration": "none", "--sjs-article-font-xx-large-fontWeight": "700", "--sjs-article-font-xx-large-fontStyle": "normal", "--sjs-article-font-xx-large-fontStretch": "normal", "--sjs-article-font-xx-large-letterSpacing": "0", "--sjs-article-font-xx-large-lineHeight": "64px", "--sjs-article-font-xx-large-paragraphIndent": "0px", "--sjs-article-font-xx-large-textCase": "none", "--sjs-article-font-x-large-textDecoration": "none", "--sjs-article-font-x-large-fontWeight": "700", "--sjs-article-font-x-large-fontStyle": "normal", "--sjs-article-font-x-large-fontStretch": "normal", "--sjs-article-font-x-large-letterSpacing": "0", "--sjs-article-font-x-large-lineHeight": "56px", "--sjs-article-font-x-large-paragraphIndent": "0px", "--sjs-article-font-x-large-textCase": "none", "--sjs-article-font-large-textDecoration": "none", "--sjs-article-font-large-fontWeight": "700", "--sjs-article-font-large-fontStyle": "normal", "--sjs-article-font-large-fontStretch": "normal", "--sjs-article-font-large-letterSpacing": "0", "--sjs-article-font-large-lineHeight": "40px", "--sjs-article-font-large-paragraphIndent": "0px", "--sjs-article-font-large-textCase": "none", "--sjs-article-font-medium-textDecoration": "none", "--sjs-article-font-medium-fontWeight": "700", "--sjs-article-font-medium-fontStyle": "normal", "--sjs-article-font-medium-fontStretch": "normal", "--sjs-article-font-medium-letterSpacing": "0", "--sjs-article-font-medium-lineHeight": "32px", "--sjs-article-font-medium-paragraphIndent": "0px", "--sjs-article-font-medium-textCase": "none", "--sjs-article-font-default-textDecoration": "none", "--sjs-article-font-default-fontWeight": "400", "--sjs-article-font-default-fontStyle": "normal", "--sjs-article-font-default-fontStretch": "normal", "--sjs-article-font-default-letterSpacing": "0", "--sjs-article-font-default-lineHeight": "28px", "--sjs-article-font-default-paragraphIndent": "0px", "--sjs-article-font-default-textCase": "none", "--sjs-article-font-xx-large-fontSize": "64px", "--sjs-article-font-x-large-fontSize": "48px", "--sjs-article-font-large-fontSize": "32px", "--sjs-article-font-medium-fontSize": "24px", "--sjs-article-font-default-fontSize": "16px", "--sjs-cover-backcolor": "trasparent", "--sjs-question-background": "rgba(255, 255, 255, 1)", "--font-family": "Open Sans", "--sjs-questionpanel-backcolor": "rgba(255, 255, 255, 0.25)", "--sjs-questionpanel-cornerRadius": "8px", "--sjs-editor-background": "rgba(255, 255, 255, 1)", "--sjs-editorpanel-hovercolor": "rgba(24, 70, 165, 0.1)", "--sjs-editorpanel-backcolor": "rgba(255, 255, 255, 0.99)", "--sjs-editorpanel-cornerRadius": "3px", "--sjs-font-pagetitle-color": "rgba(255, 255, 255, 1)", "--sjs-font-editorfont-color": "rgba(0, 0, 0, 0.9)", "--sjs-font-editorfont-placeholdercolor": "rgba(0, 0, 0, 0.5)", "--sjs-font-questiontitle-color": "rgba(255, 255, 255, 1)", "--sjs-font-questiondescription-color": "rgba(255, 255, 255, 0.75)", "--sjs-questionpanel-hovercolor": "rgba(24, 70, 165, 0.1)", "--sjs-cover-title-forecolor": "#FFFFFF", "--sjs-cover-description-forecolor": "rgba(255, 255, 255, 1)", "--sjs-font-questiontitle-weight": "700", "--sjs-font-questiontitle-size": "14px", "--sjs-font-questiondescription-size": "14px", "--sjs-font-editorfont-size": "14px"
+          }
+        });
+      })();
+      const questionDropdownSelect = Selector(".sd-input.sd-dropdown");
+      const popupContainer = Selector(".sv-popup__container").filterVisible();
+      await t
+        .click(questionDropdownSelect)
+        .hover(getListItemByText("Item 2"));
+      await takeElementScreenshot("survey-theme-dropdown-elements.png", popupContainer, t, comparer);
+    });
+  });
 });