correct width of checkboxes with drop down select

ONSdigital · May 21, 2024 · 7493fb7 · 7493fb7
1 parent c93148a
commit 7493fb7
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 25 deletions.
diff --git a/...ponents_checkboxes_example-checkboxes-with-descriptions_0_document_1_tablet.png b/...ponents_checkboxes_example-checkboxes-with-descriptions_0_document_1_tablet.png
diff --git a/...boxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png b/...boxes_example-checkboxes-with-revealed-select-expanded_0_document_0_desktop.png
diff --git a/...kboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png b/...kboxes_example-checkboxes-with-revealed-select-expanded_0_document_1_tablet.png
diff --git a/...ents_checkboxes_example-checkboxes-with-revealed-select_0_document_1_tablet.png b/...ents_checkboxes_example-checkboxes-with-revealed-select_0_document_1_tablet.png
diff --git a/...nts_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png b/...nts_radios_example-radios-with-revealed-select-expanded_0_document_1_tablet.png
diff --git a/...__components_radios_example-radios-with-revealed-select_0_document_1_tablet.png b/...__components_radios_example-radios-with-revealed-select_0_document_1_tablet.png
diff --git a/...t__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png b/...t__patterns_correct-errors_example-errors-proto-errors_0_document_0_desktop.png
diff --git a/...st__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png b/...st__patterns_correct-errors_example-errors-proto-errors_0_document_1_tablet.png
diff --git a/...s-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png b/...s-vr-test__patterns_correct-errors_example-errors-proto_0_document_1_tablet.png
diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss
@@ -6,6 +6,10 @@
 
   &__items {
     display: block;
+
+    @include mq(s) {
+      max-width: max-content;
+    }
   }
 
   &__item {
@@ -19,7 +23,9 @@
 
     @include mq(s) {
       min-width: 20rem;
-      width: auto;
+      :has(select):first-child {
+        min-width: 25rem;
+      }
 
       &--no-border {
         min-width: 0;
@@ -31,5 +37,9 @@
     @extend .ons-checkboxes__item;
 
     margin-bottom: 0;
+
+    @include mq(s) {
+      max-width: max-content;
+    }
   }
 }
diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss
@@ -1,17 +1,11 @@
 .ons-radios {
   &__items {
     @extend .ons-checkboxes__items;
-
-    @include mq(s) {
-      max-width: max-content;
-    }
   }
 
   &__item {
     @extend .ons-checkboxes__item;
 
-    width: 100%;
-
     &--no-border {
       @extend .ons-checkboxes__item--no-border;