On mobile devices, the class `onfido-sdk-ui-Theme-step` has a `height: 0`

[ravinpatel]

What was the expected behaviour?

Display the full modal of the SDK

What happened instead?

the class has a 0 height so it appears as a line

When I remove this style, it appears as:

Version info:

• Onfido SDK: 6.13.0
• OS: Android
• Browser: Chrome (same experience on all mobile browsers)
• Device: Samsung S21 (same experience on multiple devices)

Integration configuration:

Please add code snippet(s) of your integration with the Onfido SDK and all customisations of it.

Steps to reproduce:

export const DocumentFaceStep: React.FC<DocumentFaceStepProps> = ({ setShowPOA }) => {
  const userID = useSelector((state) => state.user.id)

  const [t] = useTranslation()
  const dispatch = useDispatch()

  useEffect(() => {
    setupOnfido()
    dispatch(hideLoader())
  }, [])

  const setupOnfido = async () => {
    await createOnfidoJWT(userID)
      .then((res) => {
        if (typeof window !== 'undefined') {
          import('onfido-sdk-ui').then(({ init }) => {
            init({
              token: res.onfido_token,
              containerId: 'onfido-mount-doc-face',
              onComplete: async () => {
                setShowPOA(true)
              },
              onError: (err) => {
                // eslint-disable-next-line no-console
                console.log('Onfido Err', err)
                window.Sentry.captureException(err)
              },
              steps: [
                {
                  type: 'welcome',
                  options: {
                    title: 'Before you get started',
                    descriptions: [
                      'Have your passport and proof of address (e.g., utility bill or bank statement) or scans/photos thereof ready',
                      'Your proof of address MUST be dated within the last 3 months',
                    ],
                    nextButton: 'Start ID Check',
                  },
                },
                {
                  type: 'document',
                  options: {
                    documentTypes: {
                      passport: true,
                      driving_licence: false,
                      national_identity_card: false,
                    },
                  },
                },
                'face',
              ],
              language: {
                phrases: {
                  capture: {
                    switch_device: 'Take photo using phone',
                    upload_file: 'Upload a scan or photo',
                    passport: {
                      front: {
                        title: 'Passport verification',
                      },
                    },
                    bank_building_society_statement: {
                      front: {
                        instructions: 'You must clearly show the entire page',
                        sub_title:
                          '<strong>IMPORTANT</strong>: This must be dated within the last 3 months. You must clearly show the entire page',
                      },
                    },
                    utility_bill: {
                      front: {
                        instructions: 'You must clearly show the entire page',
                        sub_title:
                          '<strong>IMPORTANT</strong>: This must be dated within the last 3 months. You must clearly show the entire page',
                      },
                    },
                    government_letter: {
                      front: {
                        instructions: 'You must clearly show the entire page',
                        sub_title:
                          '<strong>IMPORTANT</strong>: This must be dated within the last 3 months. You must clearly show the entire page',
                      },
                    },
                  },
                  image_quality_guide: {
                    title: 'Passport verification',
                  },
                  cross_device: {
                    switch_device: {
                      header:
                        'Upload a scan or photo of your document, or take a picture of it using your smartphone. You must clearly show the entire page',
                    },
                    submit: {
                      title: 'Thank you, that’s everything we need',
                      one_doc_uploaded: 'Documents uploaded',
                      action: 'Submit ID Check',
                    },
                  },
                  confirm: {
                    document: {
                      title: 'Make sure the whole page is clearly visible and readable',
                    },
                    passport: {
                      message: 'You must clearly show the entire page',
                    },
                  },
                  document_selector: {
                    proof_of_address: {
                      hint: 'Remember: your document MUST be dated within the last 3 months',
                    },
                  },
                  cross_device_checklist: {
                    title: 'One more thing to do',
                    subtitle: 'Here’s everything you’ve uploaded so far:',
                    list_item_doc_one: 'Identity document',
                    button_primary: 'Proceed to address verification',
                  },
                },
                mobilePhrases: {
                  capture: {
                    passport: {
                      front: {
                        instructions:
                          'Upload a scan/photo of your passport, or take a picture of it using your smartphone. You MUST clearly show the entire page of your passport',
                      },
                    },
                  },
                },
              },
            })
          })
        }
      })
      .catch(() => {
        dispatch(setFormErrors(t('onBoarding.idCheck.error.unavailable')))
      })
      .finally(() => {
        dispatch(hideLoader())
      })
  }

  return (
    <div>
      <div id="onfido-mount-doc-face" />
    </div>
  )
}

[ravinpatel]

in fact I think it is an issue with this style:

@media screen and (max-width: 479px) {
  .onfido-sdk-ui-Modal-inner

Trying to override on our side

[kopijunkie]

Hi @ravinpatel

We have that block of styling for that media query break point to have the SDK display on the entire viewport on mobile devices but it can sometimes clash with host apps/sites that have their own mobile layouts which seems to be the case from the screenshot above.

I would recommend overriding on your stylesheet, I believe removing or setting the height to auto should help.