I've tried Open Atrium on several mobile devices and have found that the toolbar navigation doesn't work. If I tap the 'spaces' icon, I get a list of top level spaces (which is fine), but if I expand one of the spaces, the sub spaces/sections do nothing when you tap them. This however works fine on a desktop browser with a small window to emulate a mobile display.

I've tried it on Android Lollipop (Chrome and Firefox) and also a iPhone 5 (Chrome and Safari) and the toolbar is broken on all of them. This issue also occurs when visiting docs.openatrium.com, so it's definitely not an issue with our local install.

To reproduce this issue:

1. Visit http://docs.openatrium.com/ on a smartphone
2. Tap the spaces button in the toolbar
3. Tap one of the top level spaces to expand it (e.g. Distributions)
4. Tap one of the listed subspaces (e.g. 'Open Atrium 2 documentation') - you'll find tapping on any of them does nothing.

I'd be grateful for any suggestions or workarounds as we're launching a site in a few days time.

Thanks

Comments

jubes created an issue. See original summary.

dpoletto’s picture

dpoletto CreditAttribution: dpoletto commented

Yep, it looks like that tapping (as per Step 4) really doesn't select anything.

FYI it happens also on OA 2.43 (tested against OA 2.43 and OA 2.44 through an Android 4.4.2 KitKat Smartphone using both Mozilla Firefox 40.0.3 and Google Chrome 44.0.2403.133).

I ask myself if is the hover-over effect applied (required?) on OA Toolbar working on mobile or doesn't it matter?

jubes’s picture

jubes CreditAttribution: jubes commented

I've done some further investigation and it turns out this is a known issue with Bootstrap:
http://stackoverflow.com/questions/17435359/bootstrap-collapsed-menu-lin...

The fix for an OA site is to replace the string "ontouchstart" with "disable-ontouchstart" in the file /profiles/openatrium/libraries/bootstrap/js/bootstrap.min.js

jubes’s picture

jubes CreditAttribution: jubes commented

It looks like there is also a css based fix, which is a neater solution as it could be added as sub-theme:
https://github.com/twbs/bootstrap/issues/7968

mpotter’s picture

mpotter CreditAttribution: mpotter commented

This is probably something to be posted over in the Radix issue queue since that is where Atrium get's it's Bootstrap-based theme.

We can't fix this by changing the bootstrap.min.js file that comes with the bootstrap library module as in #3. The CSS fix might be something Radix can apply. Would be good if somebody could test a css fix and post it here.

jubes’s picture

jubes CreditAttribution: jubes commented

I can confirm that the CSS fix in #4 works for me:

.dropdown-backdrop {
  position: static;
}
mpotter’s picture

mpotter CreditAttribution: mpotter commented
Status: Active » Fixed

Fixed in commit c8e0864 for oa_radix

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.