Merge pull request #160 from ditdot-dev/example/image-label

Add multiple choice question with image labels to questionnaire example

Author: phre1

examples/questionnaire/Example.vue

@@ -102,6 +102,37 @@
             type: QuestionType.Email,
             required: true,
             placeholder: 'Start typing here...'
+          }),
+           new QuestionModel({
+            id: 'multiple_choice_image',
+            tagline: "Let's take it one step further...",
+            title: 'Tell us what is your favorite social network hangout.',
+            helpTextShow: false,
+            type: QuestionType.MultiplePictureChoice,
+            multiple: false,
+            required: true,
+            options: [
+              new ChoiceOption({
+                imageSrc: require('./assets/images/facebook.png'),
+                imageAlt: 'Facebook logo',
+                label: 'Facebook'
+              }),
+              new ChoiceOption({
+                imageSrc: require('./assets/images/twitter.png'),
+                imageAlt: 'Twitter logo',
+                label: 'Twitter'
+              }),
+              new ChoiceOption({
+                imageSrc: require('./assets/images/instagram.png'),
+                imageAlt: 'Instagram logo',
+                label: 'Instagram'
+              }),
+              new ChoiceOption({
+                imageSrc: require('./assets/images/tiktok.png'),
+                imageAlt: 'TikTok logo',
+                label: 'TikTok'
+              }),
+            ]
           }),
           new QuestionModel({
             id: 'phone',

examples/questionnaire/assets/images/facebook.png

@@ -634,7 +634,7 @@ header.vff-header svg.f-logo {
 */
 
 .vff .field-multiplepicturechoice ul.f-radios{
-  max-width: 800px;
+  max-width: 750px;
   min-width: auto;
   display: -ms-flexbox;
   display: flex;
@@ -671,7 +671,7 @@ header.vff-header svg.f-logo {
   justify-content: center;
   overflow: hidden;
   width: 100%;
-  height: 164px;
+  height: 140px;
   margin-bottom: 8px;
 }
 
@@ -944,8 +944,10 @@ header.vff-header svg.f-logo {
 
   .vff .field-multiplepicturechoice ul.f-radios li{
     font-size: 14px;
-    -ms-flex: 0 0 calc(33.3333% - 8px);
-    flex: 0 0 calc(33.3333% - 8px);
+  }
+
+  .vff .field-multiplepicturechoice ul.f-radios li span.f-image{
+    height: 90px;
   }
 
 }
@@ -1021,8 +1023,8 @@ header.vff-header svg.f-logo {
     font-size: 16px;
   }
 
-  .vff .field-multiplepicturechoice ul.f-radios li span.f-image{
-    height: 130px;
+  .vff .field-multiplepicturechoice ul.f-radios {
+    max-width: 320px;
   }
 
   .vff .field-multiplepicturechoice ul.f-radios li{
@@ -1067,4 +1069,8 @@ header.vff-header svg.f-logo {
     font-size: .6em;
   }
 
+  .vff .field-multiplepicturechoice ul.f-radios li span.f-image{
+    height: 90px;
+  }
+
 }