Hi

Can I apologise for repeating my post? I put this on the wordpress forum too, but I figure this is a better place for it and the answer may help others!

I've added all my events, and when you click on each event there's a nice pop-up which appears.

On a desktop, I can scroll down the pop up and see all the content.

On a mobile or tablet (using iphone/ipad) I cannot scroll down the pop up to see the content at the bottom. When scrolling, it just scrolls the main page (which is behind the pop up).

It's like the 'active' window is behind the one you're looking at.

How can I make the pop ups scrollable?

Thanks

Rob

Dear Rob,

Thank you for letting us know about this problem!

Could you please give the link to the page, where you've inserted your calendar? We will take a look on mobile and try to provide you CSS code to prevent this problem from bothering you.

Thanks in advance!

www.craiglea.co.uk/timetable

Thanks Agapi!

Dear Rob,

Could you please let me know what device are you testing with? I checked with an HTC with Android 6, but the scrolling seemed to work properly. Also, looks like the problem cannot be resolved with just CSS, if it is device-specific.

So could you please contact us by e-mail ([email protected]) and give temporary WordPress admin access to your website? Our development team will take a look at the problem and figure out a solution as soon as possible.

Please make sure to include the link to this forum topic in your e-mail.
Thank you in advance!

Now resolved thanks to the great support.

Hopefully the fix will be added to future updates of the plugin?

Dear Rob,

That's awesome! We are very happy the problem was sorted out on your website. Please don't hesitate to let us know in case you face other problems or have questions.

We'll be happy to assist you!

And if you have a couple of minutes, kindly share your feedback on WordPress.org, telling about your personal experience with Spider Calendar and our service:
wordpress.org/support/view/plugin-reviews/spider-event-calendar

We would love to read your comments.
Many thanks in advance!

I've left a 5* review due the the great support!

I'm just waiting to be told exactly what your support people did so I can replicate it fully on my live site.

I've just seen you've got another Event Calendar WD - but it looks basically the same as Spider Event Calendar? How is it different?

Dear Rob,

Thank you so much for the review! Our team was flattered reading it!

I'm glad you asked about the difference about these two products. Let me describe it to you. As you noticed, the frontend view of Spider Calendar and Event Calendar WD are very similar.

However, let me point out, that Event Calendar WD is more dynamic, you can mention event location, have all events listed on one page and it has many paid add-ons for Pro version.

Moreover, it is in active development, while Spider Calendar is not frequently being updated. Spider Calendar is stable in some way, but Event Calendar WD is a new product and is developed with more modern technology.

Let me provide you the demo link to Event Calendar WD, where you can check the Pro version views:
wpdemo.web-dorado.com/event-calendar-wd/

Please let me know if you have further questions.
Thank you!

i am having the same issue
any answers??

Hello Anna!

We have implemented the following solution on Rob's website. Our development team has written this code to /spider-event-calendar/calendar.php file:

<script>
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    jQuery('body').addClass('ios_device');
}
</script>

<style>
.ios_device #TB_window {
    height: 90%;
    -webkit-overflow-scrolling: touch !important;
    overflow: scroll !important; 
}
@media screen and (max-width: 600px) {
    #bigcalendar<?php echo $many_sp_calendar; ?> *{
        font-size: 13px !important;
    }
    div#afterbig<?php echo $many_sp_calendar; ?>{
        width: 100%;
        margin: 0;
    }
    #bigcalendar<?php echo $many_sp_calendar; ?> .cala_day{
        max-width: 37px;
    }
}
html.thickbox_open{
    overflow: hidden;
}
#TB_window iframe{
    margin-left: 0;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;
}
#TB_iframeContent{
    height: 100% !important;
    width: 100%;
}
#TB_window{
    z-index: 1000000;
    color: #dfdfdf;
    top: 100px !important;
}
#TB_title{
    background: #222;
}
.screen-reader-text,
#views_select .arrow-down,
#views_select .arrow-right{
    display: none;
}
#afterbig<?php echo $many_sp_calendar; ?>{
    display: block !important;
}
#afterbig<?php echo $many_sp_calendar; ?> li{
    list-style: none;
}
#bigcalendar<?php echo $many_sp_calendar; ?> p{
    margin: 0;
    padding: 0;
}
#bigcalendar<?php echo $many_sp_calendar; ?> table{
    table-layout: auto;
}
.general_table a,
.last_table a,
.week_list a,
.day_ev a,
#bigcalendar<?php echo $many_sp_calendar; ?>{
    border: 0;
    text-decoration: none;
    box-shadow: 0 0;
}
.show_arrow{
    display: inline-block !important;
}
@media screen and (max-width: 768px) {
    #bigcalendar<?php echo $many_sp_calendar; ?> #cal_event p:not(.ev_name){
        display: block; /* Fallback for non-webkit */
        display: -webkit-box;
        max-width: 400px;
        height: 32px; /* Fallback for non-webkit */
        margin: 0 auto;
        font-size: 13px;
        line-height: 15px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    div#afterbig<?php echo $many_sp_calendar; ?>{
        width: 100% !important;
        margin: 0;
    }
    #bigcalendar<?php echo $many_sp_calendar; ?> .cala_day{
        max-width: 37px;
    }
}
</style>

Hi, I am trying to fix popup not scrolling on iPhone safari or Chrome browser. I pasted this code into the php file you mentioned but it breaks it.
Where do I put it?
Thanks
Clare.

Hey Mary! Thank you for posting about this problem!

If the code didn't work, can we take a look at your calendar from your WordPress admin panel? Please give us (to [email protected]) temporary Administrator access. Our development team will check the issue ASAP.

Also make sure to indicate the link to this forum thread in your e-mail.
Thanks in advance! Have a great day!