Copy link to clipboard
Copied
Greetings all,
So, I have a project which includes multiple topics. Some topics include multiple drop-downs, and the project is published to HTML5 using the responsive layout.
When viewing the published content on an Android device, the content is displayed perfectly and the drop-downs function as expected.
However, on an iOS device, when you expand a drop-down, the screen jumps to the top of the page and you can't scroll down to view the expanded content.
I get the same result when testing the drop-downs in the Employee Care sample project (Employee Care - HR Polices and Procedures - Dependants Leave).
Steps to Reproduce:
1. Open the Employee Care sample project
2. Publish responsive HTML5
3. Access published content via iOS device
4. Navigate to HR Polices and Procedures - Dependants Leave
5. Expand the first drop down
6. Scroll down to the second drop-down and expand
As far as I can tell, this is a bug in the HTML5 Responsive layout, and I have logged a bug for it.
So, my question is ... does anybody have a workaround for this?
I was thinking that if I could somehow "auto-collapse" the expanded drop-down BEFORE expanding a new one might resolve the issue. Any idea if that is possible with RH15?
Thanks
Ashley
So, after further investigation I've discovered that this is actually an iOS issue rather than a RH issue.
To fix, add the following code to the body selector in your project stylesheet:
html, body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Hope this helps someone out there!
Copy link to clipboard
Copied
What version of Safari (I presume that what the iOS is using) are you trying this on? I'm not entirely if (a) Safari is even supported or (b) that the version you have handles drop downs.
Copy link to clipboard
Copied
Thanks for the response, Jeff. I've tested on the following devices:
- iPhone 4s running v9.3.5
- iPhone 5s and 6s both running v10.2.1
Thanks!
Copy link to clipboard
Copied
What version of RH? Did you check to see if Safari was supported for that version? If so, then fire off a bug to Adobe - link should be on the main RH forum page (think it's Feature Request/Bug Report Form )
Copy link to clipboard
Copied
Thanks again, Jeff.
This is as much as I can find about support for specific browsers: " Supported browsers - The primary target platforms for the output generated using the Responsive HTML5 SSL are Android OS and Apple iOS."
No mention about which browsers support the dropdown functionality.
I'm currently running RH15 with all the latest patches applied. But I've tested with a trial version of RH17 with the same result.
I've logged this bug with Adobe: RH-368.
Copy link to clipboard
Copied
So, after further investigation I've discovered that this is actually an iOS issue rather than a RH issue.
To fix, add the following code to the body selector in your project stylesheet:
html, body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Hope this helps someone out there!
Copy link to clipboard
Copied
Excellent! Did you let Adobe know the solution on the Tracker case? Perhaps they can incorporate it into the next patch...
Copy link to clipboard
Copied
Good idea, Jeff. Just added a comment to my initial bug on the Tracker site
Copy link to clipboard
Copied
Hello Ashley,
could you please clarify what you mean by "project stylesheet"? Do you mean the RoboHelp template's layout.css stylesheet or the RoboHelp project's default.css stylesheet? From your wording I suspect you mean the default.css stylesheet, but I just want to make sure .
I'm currently running into the same issue on iPhone with RoboHelp 2017's Indigo layout and adding your suggested CSS to the default.css stylesheet doesn't help .
Thanks,
Birgit
Copy link to clipboard
Copied
Never mind, I got it to work .
Good fix, thank you.
Copy link to clipboard
Copied
Hi everyone,
We're having the same problem outlined above in iOS 11.4, where clicking a dropdown takes the user to the top of the screen, and scrolling is not possible.
We added the code suggested in our project stylesheet, and it works for versions of iOS < 11.4. But for some reason, it doesn't work for iOS 11.4. Anyone have any ideas? Will be logging this in the bug tracker as well. Thanks.
Copy link to clipboard
Copied
Did you get this one, with the inability to scroll, figured out? I'm seeing the same thing...