Does not work inside modal

FrilledShark commented 4 years ago

Bug Report

Environment

Extension version(s): [Master]
Bulma version: [v0.8.0]
OS: [MacOS 10.14.6]
Browser: [Safari 13.0.1 ]
How you are customizing the extension: [no]

Current Behavior If used inside a modal, it is always open (except dialog) and cannot be closed. And, the calendar cannot expand outside the modal.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codepen or similar. (I don't know how to use codepen) But the following HTML document is sufficient, if you change the sources:


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.css" />
    <link rel="stylesheet" href="/static/bulma-calendar/dist/css/bulma-calendar.min.css" rel="stylesheet">
    <script src="/static/bulma-calendar/dist/js/bulma-calendar.min.js"></script>
</head>

<body>
    <!-- App -->
    <div>
        <div class="is-active">
            <div class="modal-background"></div>
            <div class="modal-content">
                <input id="my-element" data-display-mode="inline" data-is-range="true" type='date'>

            </div>

        </div>

    </div>
</body>
<script>
    // Initialize all input of date type.
    const calendars = bulmaCalendar.attach('[type="date"]');

    // Loop on each calendar initialized
    calendars.forEach(calendar => {
        // Add listener to date:selected event
        calendar.on('date:selected', date => {
            console.log(date);
        });
    });
</script>

</html>```

ahdigital commented 4 years ago

@FrilledShark Did you find a work around for this issue? I am having the same issue except in Chrome on Windows.

FrilledShark commented 4 years ago

@FrilledShark Did you find a work around for this issue? I am having the same issue except in Chrome on Windows.

I tried to change the way the Calender activated, as I figured it was something to do with ‘is-active’. However, I didn’t find any solution. If you want to give it a go, I would suggest starting by playing around with this css class.

Because it was quite urgent, I switched to https://github.com/flatpickr/flatpickr. And it works wonders if you aren’t bothered with the somewhat inconsistent style.

However, if you find a solution I would be very interested in knowing, because I prefer the usage and style of Bulma-calender over flat-picker.

papyreno commented 4 years ago

I think I found the cause of this problem. In the index.sass file, at the end of the file, there is this block:

.modal
    .datetimepicker
        display: block
        max-height: 95vh
        width: 22rem
        max-width: 95vw
        overflow-y: auto

The problem is the display: block instruction.

A quick workaround could be to override this in your own style.

Qolwid commented 4 years ago

I'am using this solution for this problem, just add this to

michael-hack / bulma-calendar

Does not work inside modal #214

Bug Report