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

Does not work inside modal #214

Open
FrilledShark opened this issue Nov 3, 2019 · 8 comments
Open

Does not work inside modal #214

FrilledShark opened this issue Nov 3, 2019 · 8 comments

Comments

@FrilledShark
Copy link

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/[email protected]/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
Copy link

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

@FrilledShark
Copy link
Author

FrilledShark commented Nov 29, 2019 •
edited
Loading

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

papyreno commented Dec 9, 2019

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

Qolwid commented Jan 22, 2020

I'am using this solution for this problem, just add this to <style> tag to override the default style of datepicker style:

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

	}
	
	.datetimepicker.is-active {
		display: block;
	}

@FrancoisYu
Copy link

I'am using this solution for this problem, just add this to <style> tag to override the default style of datepicker style:

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

	}
	
	.datetimepicker.is-active {
		display: block;
	}

I've added the style to my css file, but it seems that the not working in the modal is still there. May I know the Bulma version you are using is ? Mine is 0.8.0

@Qolwid
Copy link

Qolwid commented Jun 5, 2020

I'am using this solution for this problem, just add this to <style> tag to override the default style of datepicker style:

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

	}
	
	.datetimepicker.is-active {
		display: block;
	}

I've added the style to my css file, but it seems that the not working in the modal is still there. May I know the Bulma version you are using is ? Mine is 0.8.0

I'am not using vanilla version of bulma but i'am using Buefy v0.8.12

oguzhanogreden added a commit to oguzhanogreden/bulma-calendar that referenced this issue Sep 16, 2020
@oguzhanogreden
fix for issue michael-hack#214 michael-hack#214
4d319d2
@bogachevskes
Copy link

in displayMode "default" works fine, but in mode "inline", date is not changing on click. i'm talking about using inside of a modal

@Panossa
Copy link

Panossa commented Nov 13, 2023 •
edited
Loading

Normally I would suggest just using displayMode: 'dialog' for this since that literally is a fully implemented dialog. You would not need to add a background or anything with "is-active" to your own DOM, then. Sadly, it seems to be broken.
What I'm looking at when using displayMode of "dialog" is the generated background div being position:absolute with z-index of 299 and the actual calendar being position:absolute with a z-index of 1, meaning the background is in front.

If you override the z-index of the actual calendar, however, you can use it quite well. You can do that with CSS by e.g. doing:
.datetimepicker {z-index:300 !important;}

Edit: I just noticed: even then the calendar is not working. Every click just closes it again. No idea what happened there. All clicks seem to be going "behind" the calendar or something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@ahdigital @papyreno @FrancoisYu @Qolwid @FrilledShark @Panossa @bogachevskes