Fixed #7961 - Scrollbar appears for the matrix with required question…

… (at least in Safari) (#8000) * Fixed #7961 - Scrollbar appears for the matrix with required question (at least in Safari) * Work for #7961 - Scrollbar appears for the matrix with required question (at least in Safari) * Try to fix react navigation vr-tests * Try to fix vr-tests --------- Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
surveyjs · Mar 22, 2024 · 9cbcb29 · 9cbcb29
1 parent 6e52a6e
commit 9cbcb29
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-element.scss b/src/defaultV2-theme/blocks/sd-element.scss
@@ -131,8 +131,6 @@
   padding-bottom: var(--sd-base-padding);
   background: $question-background;
   box-shadow: $shadow-small;
-  display: flex;
-  flex-direction: column;
 }
 
 //compact styles

diff --git a/src/defaultV2-theme/blocks/sd-question.scss b/src/defaultV2-theme/blocks/sd-question.scss
@@ -13,6 +13,7 @@
 .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));
 }
@@ -26,9 +27,11 @@
   margin-bottom: var(--sd-base-padding);
   border-radius: calcCornerRadius(1) calcCornerRadius(1) 0 0;
 }
+
 .sd-question--left>.sd-element__erbox--above-element {
   margin-bottom: 0;
 }
+
 .sd-element--with-frame.sd-question--left>.sd-element__erbox--above-element {
   margin-bottom: calc(1 * var(--sd-base-vertical-padding));
 }
@@ -70,6 +73,8 @@
 
   &.sd-question--error-bottom {
     padding-bottom: 0;
+    display: flex;
+    flex-direction: column;
 
     &>.sd-question__content {
       margin-bottom: var(--sd-base-padding)
@@ -108,7 +113,8 @@
   flex: 1;
   margin-top: calc(0.25 * var(--sd-base-vertical-padding)) 0;
 }
-.sd-element--with-frame > .sd-question__content--left {
+
+.sd-element--with-frame>.sd-question__content--left {
   margin: 0;
 }
 

diff --git a/src/progress-buttons.ts b/src/progress-buttons.ts
@@ -82,7 +82,7 @@ export class ProgressButtons extends Base {
     const listContainerElement = element.querySelector("ul");
     if (!listContainerElement) return;
     const listContainerElements = element.querySelectorAll(".sd-progress-buttons__connector");
-    const circleWidth = this.showItemNumbers ? 17 : 7;
+    const circleWidth = this.showItemNumbers ? 17 : 5;
     const connectorWidth = listContainerElement.clientWidth / (listContainerElement.children.length - 1) - circleWidth;
     for (let i = 0; i < listContainerElements.length; i++) {
       (listContainerElements[i] as HTMLDivElement).style.width = connectorWidth + "px";

diff --git a/src/survey.ts b/src/survey.ts
@@ -4795,13 +4795,12 @@ export class SurveyModel extends SurveyElementCore
   }
   private processResponsiveness(width: number, mobileWidth: number): boolean {
     const isMobile = width < mobileWidth;
-    this.layoutElements.forEach(layoutElement => layoutElement.processResponsiveness && layoutElement.processResponsiveness(width));
-    if (this.isMobile === isMobile) {
-      return false;
-    } else {
+    const isMobileChanged = this.isMobile !== isMobile;
+    if (isMobileChanged) {
       this.setIsMobile(isMobile);
-      return true;
     }
+    this.layoutElements.forEach(layoutElement => layoutElement.processResponsiveness && layoutElement.processResponsiveness(width));
+    return isMobileChanged;
   }
 
   public triggerResponsiveness(hard: boolean) {