bulma-calendar
bulma-calendar copied to clipboard
michael-hack
Does not work inside modal
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>```
@FrilledShark Did you find a work around for this issue? I am having the same issue except in Chrome on Windows.
@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.
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.
I'am using this solution for this problem, just add this to
.modal .datetimepicker {
display: none;
max-height: 95vh;
width: 22rem;
max-width: 95vw;
overflow-y: auto;
}
.datetimepicker.is-active {
display: block;
}
I'am using this solution for this problem, just add this to
.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 using this solution for this problem, just add this to
.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
in displayMode "default" works fine, but in mode "inline", date is not changing on click. i'm talking about using inside of a modal
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.
