#7641 Ranking question adaptivity

src/defaultCss/defaultV2Css.ts

@@ -169,6 +169,7 @@ export var defaultV2Css = {
     headerTop: "sd-question__header--location-top sd-element__header--location-top",
     headerBottom: "sd-question__header--location--bottom",
     content: "sd-question__content",
+    contentSupportContainerQueries: "sd-question__content--support-container-queries",
     contentLeft: "sd-question__content--left",
     titleNumInline: "sd-element__title--num-inline",
     titleLeftRoot: "sd-question--left",

src/defaultV2-theme/blocks/sd-question.scss

@@ -10,6 +10,9 @@
   margin-top: calcSize(1);
 }
 
+.sd-question__content--support-container-queries {
+  container-type: inline-size;
+}
 .sd-question--title-top>.sd-question__erbox--above-question {
   margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
 }

src/defaultV2-theme/blocks/sd-ranking.scss

@@ -8,6 +8,66 @@
   left: calcSize(-3);
 }
 
+@container (max-width: #{$sd-panel-normal-min-width}) {
+  .sv-ranking--select-to-rank-horizontal {
+    flex-direction: column-reverse;
+
+    .sv-ranking__containers-divider {
+      margin: calcSize(3) 0;
+      height: 1px;
+      width: initial;
+    }
+
+    .sv-ranking__container--empty {
+      padding-top: calcSize(1);
+      padding-bottom: calcSize(1);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .sv-ranking__container {
+      max-width: initial;
+    }
+
+    .sv-ranking__container--to {
+      .sv-ranking-item {
+        left: initial;
+      }
+    }
+
+    .sv-ranking__container--empty {
+      &.sv-ranking__container--to {
+        .sv-ranking-item {
+          left: initial;
+        }
+
+        .sv-ranking__container-placeholder {
+          padding-left: calcSize(3);
+          padding-right: calcSize(3);
+        }
+      }
+
+      &.sv-ranking__container--from {
+        .sv-ranking__container-placeholder {
+          padding-right: initial;
+        }
+      }
+    }
+
+  }
+}
+
+@container (max-width: #{$sd-panel-medium-min-width}) {
+  .sv-ranking__container--empty {
+    &.sv-ranking__container--to {
+      .sv-ranking__container-placeholder {
+        margin-left: calcSize(-5);
+        margin-right: calcSize(-5);
+      }
+    }
+  }
+}
 
 .sd-element--with-frame .sv-ranking--mobile {
   .sv-ranking-item__icon-container {

src/question.ts

@@ -1011,6 +1011,9 @@ export class Question extends SurveyElement<Question>
       .append(cssClasses.headerBottom, this.hasTitleOnBottom)
       .toString();
   }
+  protected supportContainerQueries() {
+    return false;
+  }
   public get cssContent(): string {
     this.ensureElementCss();
     return this.getPropertyValue("cssContent", "");
@@ -1021,6 +1024,7 @@ export class Question extends SurveyElement<Question>
   protected getCssContent(cssClasses: any): string {
     return new CssClassBuilder()
       .append(cssClasses.content)
+      .append(cssClasses.contentSupportContainerQueries, this.supportContainerQueries())
       .append(cssClasses.contentLeft, this.hasTitleOnLeft)
       .toString();
   }

src/question_ranking.ts

@@ -40,7 +40,9 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
     if (this.isDesignMode || item.disabled) return undefined;
     return 0;
   }
-
+  protected supportContainerQueries() {
+    return this.selectToRankEnabled;
+  }
   public get rootClass(): string {
     return new CssClassBuilder()
       .append(this.cssClasses.root)

visualRegressionTests/tests/defaultV2/ranking.ts

@@ -115,6 +115,46 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check ranking question selectToRankEnabled narrow", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "ranking",
+                "name": "question1",
+                "maxWidth": "400px",
+                "choices": [
+                  "Item 1",
+                  "Item 2",
+                  "Item 3"
+                ],
+                "selectToRankEnabled": true
+              },
+              {
+                "type": "ranking",
+                "name": "question2",
+                "maxWidth": "250px",
+                "minWidth": "200px",
+                "choices": [
+                  "Item 1",
+                  "Item 2",
+                  "Item 3"
+                ],
+                "selectToRankEnabled": true
+              }
+            ]
+          }
+        ]
+      });
+      await takeElementScreenshot("question-ranking-select-to-rank-narrow-medium.png", Selector(".sd-question").nth(0), t, comparer);
+      await takeElementScreenshot("question-ranking-select-to-rank-narrow-small.png", Selector(".sd-question").nth(1), t, comparer);
+    });
+  });
+
   test("Shortcut position due container layout", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);