Stretched Widget on Custom Sign-In Page
Last Updated:
Overview
This article explains why the widget on the sign-in page for a custom domain looks to be stretched, with excess white space above and below the login form.
Applies To
Cause
This issue is caused by a malformed or absent DOCTYPE for the custom sign-in page. If using the Transitional or Strict DOCTYPES, the document type definition (DTD) may be missing.
Solution
Ensure that a DOCTYPE declaration is included in the Code editor for the custom sign-in page (Customizations > Brands > {{custom brand}} > Pages > Sign-in page > Page Design).
By default, Okta will include the Strict DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
If the Transitional DOCTYPE is preferred, use the following instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It is also possible to use the HTML5 DOCTYPE, but this may not be appropriate for legacy integrations. If using this DOCTYPE, ensure that all integrations work with it:
<!DOCTYPE html>