Merge pull request #4 from HELWATANY/main

fix(slider): fix slider validation layout shift
formwerkjs · Dec 31, 2024 · e5861ee · e5861ee
2 parents ba72608 + fd81a7d
commit e5861ee
Showing 1 changed file with 4 additions and 8 deletions.
diff --git a/src/content/docs/guides/fields/_partials/_slider.mdx b/src/content/docs/guides/fields/_partials/_slider.mdx
@@ -25,7 +25,7 @@ const thumbData = useThumbMetadata(0);
       <Thumb />
     </div>
 
-    <div v-if="errorMessage" v-bind="errorMessageProps" class="error">
+    <div v-bind="errorMessageProps" class="error">
       {{ errorMessage }}
     </div>
   </div>
@@ -36,6 +36,7 @@ const thumbData = useThumbMetadata(0);
   --color-text: #333;
   --color-error: #f00;
   display: flex;
+  width: 300px;
   align-items: center;
   gap: 6px 14px;
   flex-wrap: wrap;
@@ -65,18 +66,13 @@ const thumbData = useThumbMetadata(0);
   }
 
   .error {
-    display: none;
+    display: block;
+    min-height: 18px;
     font-size: 13px;
     color: #f00;
     width: 100%;
   }
 
-  &:has([aria-invalid='true']) {
-    .error {
-      display: block;
-    }
-  }
-
   &:has([aria-orientation='vertical']) {
     .track {
       flex-direction: column;