• Registered: 2020-03-16
  • Posts: 24

Topic: Fwd and back buttons don't work on the iPhone 6 or 8

Hi All,

Apologies if this has been covered before, but I'm wondering if anyone else has encountered what I suspect is a CSS bug affecting the 'forward' and 'back' buttons when I view the calendar on my iPhone 8?

When I press either button - whether in landscape mode or portrait, Safari or Chrome - I get the 'change view' popup, with the "When done click this header or 'Done'" message. It's not my fat fingers.

If you use the F12 dev mode in desktop Chrome / Chromium and tell it to be any kind of mobile phone you'll see the page renders the buttons rather weirdly, and I'm guessing this is related:

greiginsydney.com/random/Cal1.png

greiginsydney.com/random/Cal2.png

(Apologies for the unclickable links - the forum won't let me insert an image or a formatted URL.)

The same issue existed on my previous iPhone 6 - it's been a long-standing cause for expletives at a calendar we can't otherwise live without.


Thanks,


Greig.

Quote Post 1

  • From: DK
  • Registered: 2018-03-02
  • Posts: 165

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Hello Greig

Yes - it would be easier if we could post images and links much easier - but I think that it is blocked because of the persons that tries to sell "I listed some products that blocked my post" and other things or services.

Could you anyway supply a link to your calendar.
You could send a message via the "contact us". It could maybe also be useful for Roel to know which calendar version and PHP version you are using.

Schwartz's Website

Quote Post 2

  • Registered: 2020-03-16
  • Posts: 24

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Versions: LuxCal calendar: 4.7.7M (us)
 PHP: 7.2.24-0ubuntu0.18.04.3 - Show info
 Database: MySQL V5.7.29-0ubuntu0.18.04.1

The calendar requires you to login to see anything, and I'd rather not expose its link publicly either.

I've sent some more details through via the Contact Us page.

- Greig.

Quote Post 3

  • Registered: 2020-03-16
  • Posts: 24

Re: Fwd and back buttons don't work on the iPhone 6 or 8

I've just found the Luxcal demo site also demonstrates the same issue:

www.luxsoft.eu/luxcal/

Quote Post 4

  • Roel
  • Roel
  • Administrator
  • Offline
  • Registered: 2018-02-26
  • Posts: 565

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Hi Greig,

Could you try the following:
On the admin's Settings page, in section General, set the "Max. width of small screens" (4th from the bottom) to 800 and hit the Save Settings button
And now try again and please let us know the outcome.

Roel

Quote Post 5

  • Registered: 2020-03-16
  • Posts: 24

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Thanks Roel.

That looks to have fixed it when the phone is landscape, but no apparent change in portrait. F12 confirms same: renders as expected in iPhone emulation when landscape, but still overlaying each other and messed in portrait.

We also tried setting it to 600 and then 400 given the phone is 375 wide (x 667 high) in portrait mode but that didn't help.

sad


- G.

Quote Post 6

  • Roel
  • Roel
  • Administrator
  • Offline
  • Registered: 2018-02-26
  • Posts: 565

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Hello Greig,

Could you please try the following: Edit the file "css/css.php" and . . .
- on line 237: of style ".viewHdr" change the minimum width to "min-width:230px;"
- on line 238: of style ".arrowLink" chnage the padding to "padding:0 10px;"

This should make a difference wink

Roel

Quote Post 7

  • Registered: 2020-03-16
  • Posts: 24

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Thanks Roel, not perfect but I think we're getting closer. The "forward" button is now happier, but only on landscape mode, but I think I can see why.

I've uploaded a new image from my browser that shows my remaining issue in both portrait and landscape:

https: // greiginsydney.com / random / ical-floatC.point.jpg

I'm not sure what it's telling me though: is it a Z-order issue, or is that h3 zone - the blue highlight - just not being correctly calculated?

On a large screen it's only "hot" towards the left edge, far away from the arrow.


- G.

Quote Post 8

  • Registered: 2020-03-16
  • Posts: 24

Re: Fwd and back buttons don't work on the iPhone 6 or 8

I just did a naughty and killed the "onClick" event @ ~line 213 in \common\header.php:

This is the new line:
<h3 class='floatC point'\">{$xx['hdr_options_submit']}</h3>

The forward and backwards buttons now work beautifully in portrait and landscape. Yes, it's a kludge and will be blown away with the next update, but it brings me some immediate peace with no loss of functionality [that we use].

I'll happily reinstate it if you'd like me to try a CSS-based fix Roel, but if not I'm OK calling this issue closed.


- Greig.

Quote Post 9

  • Roel
  • Roel
  • Administrator
  • Offline
  • Registered: 2018-02-26
  • Posts: 565

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Hi Greig,

That's not naughty, that's clever wink
It's a good hint of what is causing the problem, but I don't understand how this is possible.
The onClick is part of an absolutely positioned element, which should have no influence on other elements like the arrows.
Unfortunately I cannot reproduce the problem; so it's hard to experiment and solve it.

How do I tell Chrome to be a mobile phone?

Roel

Quote Post 10

  • Registered: 2020-03-16
  • Posts: 24

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Press F12 to bring up the developer view, then centred at the top of the screen are the view options. At the top left is your pick-list of phones, and you can create custom ones if you don't see yours there. The circular icon at the extreme right of that horizontal menu is the landcape/portrait toggle.

Vertically along the RHS is the code and the log of interactions between client and server. In the top section if you select Elements (which is currently my default - it may be yours too) in the menu at the top and click through the HTML, as you highlight each element it adds colour to reveal where that is in the rendered page.

The entire left view (that of your 'mobile') is clickable/active.

It was this process that led me to the h3 for the offending popup options menu. It took some grepping to find where "when done click this header" lived in the code, bouncing me through the languages files before directing me back to header.php and my current solution.


- G.

Quote Post 11

  • Roel
  • Roel
  • Administrator
  • Offline
  • Registered: 2018-02-26
  • Posts: 565

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Thanks Greig.
I followed the steps in your last post, but the problem is that I don't see a problem wink
The forward / backward arrows show at the correct spot for all mobile phones.

It's hard to debug a problem which doesn't show up neutral

Roel

Quote Post 12

  • Registered: 2020-03-16
  • Posts: 24

Re: Fwd and back buttons don't work on the iPhone 6 or 8

I agree Roel - there's nothing more frustrating than trying to debug and fix something that won't happen for you.

I've uploaded another image - this time of your own demo site, which manifests the same issue to me when I try it on my iPhone.

https: // greiginsydney.com / random / luxcal-demo-bug.jpg

Don't worry if you can't get it to happen, as I've worked-around it and I'm happy. (I'll give it a week before I revive my remaining bug-bear, the session expiry thread.)

- Greig.

Quote Post 13

  • Roel
  • Roel
  • Administrator
  • Offline
  • Registered: 2018-02-26
  • Posts: 565

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Thanks for your very clear explanation. And when looking at the image I see your point, But my problem is that I don't understand how this h3 area can influence the position of the arrow heads. (Actually on the image the arrow heads are not messed up).
The h3 area is part of a div which is positioned "absolute" and "absolute" positioned elements do not affect on the positioning of other elements on the page.

I'm now wondering if there is no misunderstanding wink

The calendar's behavior w.r.t. narrow screens works as follows:
At the very moment the calendar page is loaded in the browser, it tests the width of the screen and if the width is less than Max. width of small screens (settings page), it forces a reload of the page in "narrow screen mode".
This means that if you load a calendar page on your smart phone in landscape position (screen width > setting) and thereafter turn your phone to portrait position (screen width < setting), then the calendar doesn't fit anymore and you should reload the page so that the calendar can serve the page in "narrow width mode".

In other words: If you load the calendar in landscape position and turn your phone to portrait position, yes the arrow heads (and more) won't fit, if you then reload the page, it should fit.

Roel

Quote Post 14

  • Registered: 2020-03-16
  • Posts: 24

Re: Fwd and back buttons don't work on the iPhone 6 or 8

Ahaaaaa. OK, so that explains an intermittent inconsistency I was seeing when rotating the phone. The arrows WERE indeed moving relative to the centre of the screen, but now I get it. Thanks for that. I think this is a great tip to apply to ANY site viewed on a mobile.

I think the "funky arrow placement" issue was resolved by the tweak you gave me to the CSS last weekend, or explained by the above - but I still had the issue with the arrowheads not working, but instead bringing up the Options menu.

On the h3 area, my best guess is this was something like a Z-order issue (or some weird situation with two clickable elements competing) as it vanished as soon as zapped the onClick.

Regardless: I'm all good now. I appreciate you taking the time to look into this one, and your tip above was REALLY helpful.


- G.

Quote Post 15