List survey updates (#13)

* Move checklist survey scrollbar to far left of iam

* Prevent yellow checbox active highlighting (caused by Android web views)

* Add checklist-survey template readme

* Update top level readme with checklist survey gif

README.md

@@ -17,3 +17,6 @@ For more information of how html in-apps work see our [advanced usage doc](./adv
 
 ###### [Promo Wheel](./promo_wheel)
 <img alt="Promo Wheel" src="./promo_wheel/readme_assets/promo_wheel_iam.gif" width="200px">
+
+###### [Check List Survey](./check_list_survey)
+<img alt="Check List Survey" src="./check_list_survey/readme_assets/checklist_survey_iam.gif" width="200px">

check_list_survey/README.md

@@ -0,0 +1,6 @@
+# Check List Survey
+
+The check-list survey template demonstrates a long form with custom checkbox styling that requires scrolling to view the overflowed content. It disables the default in-app message behavior of vertical dragging to dismiss so that it won't get mistken for scrolling down the in-app message
+
+###### Carousel on Android
+![Screenshot](readme_assets/checklist_survey_iam.gif)

check-list-survey/index.html → check_list_survey/index.html

@@ -33,7 +33,6 @@
         position: relative;
         background: #fae8cd;
         margin: 18px;
-        padding: 24px 24px 0;
         border-radius: 8px;
 
         display: flex;
@@ -63,6 +62,10 @@
         border-radius: 50%;
       }
 
+      .center-modal .headings {
+        padding: 24px 24px 0 24px;
+      }
+
       .center-modal h1 {
         margin: 32px 0 0 0;
         color: #222;
@@ -99,12 +102,13 @@
         background: #ffffff;
         border-radius: 8px;
         border: none;
-        margin: 12px 0;
+        margin: 12px 24px;
       }
 
       form input[type="checkbox"] {
         /* Add if not using autoprefixer */
         -webkit-appearance: none;
+        outline: none !important;
         appearance: none;
         /* For iOS < 15 to remove gradient background */
         background-color: #fff;
@@ -185,8 +189,10 @@
           />
         </svg>
       </div>
-      <h1>Any allergies?</h1>
-      <h2>Get better recommendations and other customized experience</h2>
+      <div class="headings">
+        <h1>Any allergies?</h1>
+        <h2>Get better recommendations and other customized experience</h2>
+      </div>
       <form>
         <div>
           <input type="checkbox" name="dairy" />