search

olton / Metro-UI-CSS

Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!
http://metroui.org.ua/
MIT License
7.02k stars 1.97k forks source link

Calendar Picker in dialog mode is below the overlay layer when inside a navview-content div #1450

Closed rod-farias closed 4 years ago

rod-farias commented 4 years ago

If the CalendarPicker is part of a NavView component and is configured with data-dialog-mode="true", then it is displayed below the overlay layer and it is impossible to select a date.

This is my html doc:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" class="metro-no-touch-device" lang="es-CL"><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<meta name="metro4:locale" content="es-MX" />
<meta name="metro4:week_start" content="1" />

<title>TEST</title>
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4.3.2/css/metro-all.min.css">

<body class="h-vh-100 bg-lightGray m4-cloak">

<div data-role="navview" data-compact="md" data-expand="lg" data-active-state="true">

    <nav class="navview-pane">
        <ul class="navview-menu">
            <li>
                <a href="#section1">
                    <span class="icon"><span class="mif-books"></span></span>
                    <span class="caption">SECTION 1</span>
                </a>
            </li>
        </ul>
    </nav>

    <div class="navview-content">
        <input type="text" data-role="calendarpicker" data-dialog-mode="true" data-prepend="Date" />
    </div>
</div>

<script src="https://cdn.metroui.org.ua/v4.3.2/js/metro.min.js"></script>
</body>
</html>

When I try to disable the overlay with data-dialog-overlay="false" the following error is triggered:

TypeError: n.overlay is null [metro.js:9697:30]

I'm working with metro 4.3.2, testing in Firefox.

olton commented 4 years ago

Please, use codepen.io to create code example.

rod-farias commented 4 years ago

https://codepen.io/rod-farias/pen/gOOxvzZ?editors=1111

olton commented 4 years ago

fixed in 4.3.3