Jump to content

Trouble with modals


MarkE
 Share

Recommended Posts

This is a bit complicated to explain, so bear with me ...

Essentially my problems seem to be with the way that iPads (and presumable all IOS devices) deal with modals. I started by implementing the @tpr's FrontEndEditLightbox module in order to provide a controlled method for editing pages while in the front end. This all worked beautifully in development and when testing it on my Windows PC. However, on an iPad, it ran into a problem: the modal would not scroll - only the background scrolled. I vaguely recall having come across this "feature" once before, but can't remember how I resolved it (e.g. a fix or a work-round). There is a separate thread on the FEEL-specific issue: 

 

Pending a solution there, I tried doing a simple module of my own. Having previously, successfully, used pw-modal and the JqueryUI module in the backend, I tried using it to open a back-end modal from the frontend. However, it seems that it doesn't operate in this mode (e.g. data-href attribute is not passed). So, taking the line of least resistance, I just supplied a href attribute (see code at foot), with ?modal=1. This opens a "full screen" modal-type page, which would be fine for my purposes and, again, works on the PC. (I also supplied a custom button on the admin page to return to the frontend page.)

On the iPad what happens is:

  • On touching the button, the admin page opens in a "full-screen" modal (i.e. no background and no menus/headers) - just like the PC - and scrolls too ? 
  • On returning to the front-end page, all scrolling is disabled, even after refreshing or going to another page in the same site ? 

I am at a loss to work out what is going on and it seems that you need a desktop Apple mc to operate developer debug tools on an iPad ?

Any fixes, work-rounds or even just vague clues would be much appreciated!

Thanks.

Code:

$this->wire('modules')->get('JqueryUI')->use('modal');
            $btn = $this->wire('modules')->get("InputfieldButton");
            if ($settings['mode'] == 'page-add') {
                $btn->attr('href', wire('config')->urls->admin . "page/add/?parent_id=" . $p->id . "&template_id=" . $template->id . "&open=" . $settings['open'] . "&back=1&modal=1&name=MF" . $today);
            } else {
                $btn->attr('href', wire('config')->urls->admin . "page/edit/?id=" . $p->id . "&open=" . $settings['open'] . "&back=1&modal=1");
            }

(Note: $p is the current page; the 'back' parameter is just to load the back button - to the front end - on the admin page; the 'open' parameter configures how the front-end page will display on returning to it)

EDIT: PS - the problem (i.e. no scrolling in front-end on return) is not resolved by removing modal=1 (i.e. just opening in a normal admin page).
         PPS - the problem can be cleared by closing and re-loading safari, so maybe it is something to do with cached css?

Link to comment
Share on other sites

UPDATE: This seems to be a much more general problem than my OP implies. In fact it occurs whenever switching from back-end to front-end on the iPad.

For example - when in the back-end, I select "view site" and the site page will not scroll. However, it is clearly just an issue with my site (it doesn't happen with the processwire demo site) but I'm not sure where to look for the problem. Any ideas?

UPDATE 2: The problem described in this post is a side-effect of having FEEL installed - so the work-round in my OP works provided FEEL is uninstalled. I've posted the bug on the other thread.

Edited by MarkE
update
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...