DP Calendar Mobile display

HI
I've installed DP Calendar on Joomla 3 Game instance. It works fine on the desktop and iPad, but on iPhone there is an issue with the display of calendar content - see here: http://dev.counterfire.org/index.php/events#year=2014&month=6&day=4&view=month

screenshot attached

screen.png

- the day headings scroll left to right but the events themselves remain fixed and mis-aligned with columns

With Prostar template this issue doesn't occur.

Could you please advise on any changes I may need to make to Game in order for DP Calendar to work on iPhone?

best
Ady

Hi

Please send me an access to joomla panel. I need to see how it works in the joomla default panel first.

Done thanks

Hi

A proboblem is not with template but with bootstrap functionality which is included. Calendar is using a table as a background to show events over them, but bootstrap is changing the table to be more visible with scrolling to sides and with this, functionality of calendar is broken. You should ask calendar developers to udate extention with a fixes to bootstrap since it's a standard in joomla, or disable bootstrap, but this may have a bad influence on template layout, I'm not sure how often our developers are using it. Best thing is to make some tests. A loading line is in template's index.php file.

Thanks for your assistance on this. I approached DP support, this is a part of their response:

'There are some bootstrap issue with Gavick though. The X and blank space under the calendar are related to the way Gavick handles .modal ; search your templates for this word. It is also related to why your Jump and Print buttons are not shown.'

Not been able to find .modal - could I get some advice on the response from DP?

There are a few posts on here and on the Digital Peak site regarding issues with display when using DPCalendar and Gavick templates. Its a pretty popular and useful calendar extension, I'd like to use it if possible. Thanks anyway

Hi

I'm afraid I do not understand what they mean. There is not even one line attached to a modal class in our template or their component. So I believe they are talking about lack of handling, anyway this has nothing to do with the problem You've described. It's not related. Please disable bootstrap on Your site and you will see that at least the problem from this topic will be resolved, but couple of new may appear, so this would be just a test.

Below a screen showing that modal has no style attached from template.

Hi
Please disable bootstrap on Your site and you will see that at least the problem from this topic will be resolved

Thanks Teitbite - by disabling Bootstrap I assume you mean remove the following line of code from /templates/gk_game/index.php

Code: Select all

JHtml::_('bootstrap.framework');

I have removed this line.

However the problem is still there (no new ones though). Advice gratefully received.

Hi

Yes, becuase bootstrap it still being loaded along with a different extention. Please send me an access to ftp. I believe it's all about one function of bootstrap. The one making tables on mobile to scroll. Maybe I'll be able to block it.

Hi there

I am using gk_university V3.11.1 as my theme on Joomla 3.3.1 with DPCalendar 4.0.10

I have the same problem here: http://www.tapiochre.co.uk/client/blake ... view=month

The observations are:

1. The red box and its borders are always present under the Calendar
2. OnClick an event I do not get the configured pop-up but the panel under the Calendar is populated with the Event Details
3. I cannot remove the map, even though Display Map = No in the config, the map continues to show on click of Event
4. I cannot see the Date Picker or Print Icon buttons (I can see they are there but there are no icons displayed)

Hope you can help?

Chris

Hi Chris
I've resolved some of the issues with DP Calendar by using a patch posted on the DP site a coupe of days ago:

https://joomla.digital-peak.com/support ... -correctly


There's still the issue with the scrolling background on mobile displays though.

Hi

Yes, becuase bootstrap it still being loaded along with a different extention. Please send me an access to ftp. I believe it's all about one function of bootstrap. The one making tables on mobile to scroll. Maybe I'll be able to block it.

Hi teitbite, I've PM'd you the details. Thanks for your time on this.

Hi

Can You please explain (better show me) the scrolling background issue? I cannot see it. So I cannot tell if it was fixed or I just d not know where to look.

Thanks Teitbite, sorry for not being clear.
The issue is with the display of DPCalendar on mobiles and tablets, where the background image with the days of the week scrolls but the events themselves remain static and do not fit within the window:


If you visit this page: http://dev.counterfire.org/events#year=2014&month=7&day=27&view=month and select 'month' view, you'll be able to see what I mean. In an earlier post you mentioned that it may be due to one setting in bootstrap (let's hope so!). Best wishes
Ady

Hi

Do You have some kind of security o Your server. I'm being redirected to a page You can see on screen after about 15s of watching the site.

Hi

Do You have some kind of security o Your server. I'm being redirected to a page You can see on screen after about 15s of watching the site.

Hi Teitbite
No security, it was one particular event series on the calendar that was causing that - when you mouse over it or touch it for some reason it was opening the page you sent a screenshot of. I've disabled that recurring event now and its seems to have resolved the problem. I'll add that to the list of things I have to workaround to get this software to work
Thanks
Ady

Hi

Ok. I'm not sure. A scripts in this callendar is messing up my developer tool, but try add this to mobile.css:

Code: Select all

#gkMainbody table {
    overflow: visible;
}


if above will not help add this one class as well as the above:

Code: Select all

.fc-view {
    overflow: scroll;
}


Thansk Teitbite, unfortunately neither of those bits of code have any impact.

Hi

Do not say it's not working yet I do not see this code in any css file. Where have You placed it ? Put it into override.css and make sure override is enabled in template settings.

Thanks Teitbite
I see what's happened - I had browser caching for .css files enabled via my .htaccess file, so even though I'd added the code to both mobile.css and override.css our browsers were still using the cached version without the new code.

I've deleted the code in the .htaccess file now (and only included it in the override.css) and there is now a change in the mobile display.

There is some strange mis-alignment with the day headings though, so although the scrolling works its not quite fixed yet - for instance an event on Monday 28 July spans two days according to the day headings, but should onluy be one, and Sunday occupies three columns.

Hi

I still cannot see my code on Your site, but the table header is set in style="" to be 38px width, so it's an extension issue.
Try add this to mobile.css to overwrite this value:

Code: Select all

.fc-border-separate tr.fc-last th,
.fc-border-separate tr.fc-last td {
    width: 50px !important;
}


Thats done it! Excellent work Teitbite, many, many thanks
I had to manually delete all the cache files, gk cache was caching the css (even though it was disabled ), however that last bit of code has resolved the issue - in fact its a superior solution to the way the calendar displays in Prostar and Beez - which squashes everything into a very narrow view. Nice one.
Now I'll implement it on the live site and pop over to the DP Calendar forum and post the results for other Game /DP Calendar users

Hi

Glad You are happy from solution. It was not easy to figure that out