Last week I bought the Kalendar stack from Weavium for building an event calendar for a yoga studio. As the Kalendar stack from Weavium has a modern and beautiful design, I gave this stack a try. It’s really a beautiful designed responsive stack which allows the usage of remote calendars from ical or google. All fine and easy but there is a big problem when clicking on the event details inside the modal box. I’ve posted a support question @Weavium but I also wanted to hear if anybody in our RW community has experienced similar problems or is able to help me how to adjust the modal box. In the settings of the modal box I can change the z index inside the modal box, but that doesn’t seem to solve it. Here is my problem:
When I click on a calendar entry, the modal box opens but depending on the scroll position, the box get’s stuck or half cut and I am unable to scroll. If you scroll up and click on the bottom calendar entry you will see what I am talking about.
Another problem inside the details box, the 2 buttons “Tag” and “Monat” are above the content of the detail box.
I also tested Kalendar with the Aspen theme from Nick Cates but unfortunately the same problem occurs. That means the malfunction isn’t caused by Megamenu or Foundry which I am currently using with the Kalendar stack.
I don’t have Kalendar, but from looking at your page, these are likely issues that Weavium will have to look into. The scrolling issue in particular.
The tags stack has a very high z-index (999999). Is there a setting in that stack to lower it? If not, this CSS will override it and correct the issue for now. I’d still have them look into this issue too.
Thanks a lot for your help!
There is an option to change the z-index. I’ve changed it now to “9” but it seems not to have any game winning effect for me. By default the Kalendar stack comes with a z-index of “500000”.
Hope the guys from @weavium will have a deeper look, still waiting for their reply.
Great Don, did that and it works, the date/month buttons disappeared from the modal box. The only thing which still worries me, that depending on the position of a calendar entry, the modal box is half hidden behind the menu on top of the page.
I’m taking a look at this now. Sorry for the slow reply.
It definitely looks like some sort of theming conflict. The modal is set to a fixed position, but for some reason it is unable to expand beyond the confines of the main content section.
Have you tried using a different theme by chance?
It’s hard to say and I am still trying to find the source of the issue, but it looks like it might be caused by something called Elixir Container?
I will keep working and get back to you on this one.
Great you finally had a chance to reply, thanks a lot!
What I did and what looks good for me now:
removed the container and margins stack from the foundry theme. I often place stacks inside theses 2 containers, as they give me more control where to place content. Anyway, in the case this caused an issue and for me the modal boxes look good now.
I kept this code, suggested by Don: .kalendar-view-toggles {
z-index: 9 !important;
}
Otherwise the “Tag” and “Monat” would still be displaced above the modal box content and even appear inside the sticky menu.
Any ideas for that?
Anyway, much happier for now and as I said, the Kalendar I like a lot!
Yes, mainly the stack is running now, there is just one more thing which I am unable to fix.
It’s about the time format. I’ve done all changes to make sure the times are running from 0-24 (HH) and not am or pm.
In desktop view times are fine but in the mobile view, the headers still display times am/pm.
Any suggestion how and where to fix this?? (s. Screenshot)
I will check this out. I believe I may have set fixed format for the event tiles on mobile. I will try to make sure the same time format is applied to those as well. Cheers~
