Widget height causing scrollbar

Help
,
1

Hi, I have a New Uni Login page template with the following body:

<body class="_widget-auto-layout"; >
    {% if application.metadata.app_features contains "navbar" %}
        <!-- NAVIGATION BAR START -->
        <nav class='navibar' id='navibar'>
        <div class='container' style="width: 200px;">
            <div class='navibar--items'>
                <div class='navibar-item navibar-item--brand'> <a class='navibar-item--link' id="logo-link"
                        href='https://www.google.com/'><!-- TOP NAVIGATION BAR  Logo -->
                    </a>
                </div>
            </div>
        </div>
        </nav>
        <!-- NAVIGATION BAR END -->
    {% endif %}

    {%- auth0:widget -%}
</body>

When the Nav bar is displayed, the page is too large so displays a scrollbar. I seems “_widget-auto-layout” is setting the page height and when the navbar is added, it then is too large. How do I make the page smaller to fit the navbar ?
thanks
Dave

2

Hi,

I found the answer. I simply wrapped a ‘div’ tag around the widget:

    <div  class="prompt-wrapper">
        {%- auth0:widget -%}
    </div>

And added the following prompt-wrapper class:

      .prompt-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 85vh;  <== This does the trick!
      }