Post new reply

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

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

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.

Thanks Greig.
I followed the steps in your last post, but the problem is that I don't see a problem
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

Roel

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.

Hi Greig,

That's not naughty, that's clever
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

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.

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.

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

Roel

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.

- G.

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

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

www.luxsoft.eu/luxcal/

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.

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.