New Universal Login Widget at the Top Left of the Page

Knowledge Solutions
, ,
1

Problem statement

The New Universal Login widget is positioned at the top left side of a page.

Symptoms

Visual inspection of the login page will show the New Universal Login widget positioned at the top left corner of the web page

Steps to reproduce

Create a page template with the sample code below:

<!DOCTYPE html><html>
  <head>
    {%- auth0:head -%}
  </head>
  <body>
    {%- auth0:widget -%}
  </body></html>

Cause

The page template for the login does not reference the class to center the widget:

<body class="_widget-auto-layout">

Solution

To center the New Universal Login widget on a page, include the CSS code class="_widget-auto-layout" in the <body> element in the page template used in the tenant.

Please see this document for more details.

For example:

<!DOCTYPE html>
<html>
<head>
{%- auth0:head -%}
</head>
<body class="_widget-auto-layout">
{%- auth0:widget -%}
</body>
</html>