Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
rod-farias opened this issue Oct 28, 2019 · 3 comments
Closed

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

rod-farias opened this issue Oct 28, 2019 · 3 comments
Labels
bug Fixed
Milestone
v4.3.3

Comments

@rod-farias
Copy link

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
Copy link
Owner

olton commented Oct 28, 2019

Please, use codepen.io to create code example.

@rod-farias
Copy link
Author

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

@olton olton added the bug label Oct 28, 2019
olton added a commit that referenced this issue Oct 29, 2019
@olton
Calendar Picker: fix dialog mode, issue #1450
ceec833
@olton olton added the Fixed label Oct 29, 2019
@olton olton added this to the v4.3.3 milestone Oct 29, 2019
@olton
Copy link
Owner

olton commented Oct 29, 2019

fixed in 4.3.3

@olton olton closed this as completed Nov 3, 2019
olton added a commit that referenced this issue Oct 28, 2023
@olton
Calendar Picker: fix dialog mode, issue #1450
d5f6960
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Fixed
Projects
None yet
Milestone
v4.3.3
Development

No branches or pull requests
2 participants
@olton @rod-farias