• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

drop downs not working on iOS device

Community Beginner ,
Mar 22, 2017 Mar 22, 2017

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

Views

1.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Mar 23, 2017 Mar 23, 2017

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!

Votes

Translate

Translate
Community Expert ,
Mar 22, 2017 Mar 22, 2017

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 22, 2017 Mar 22, 2017

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 22, 2017 Mar 22, 2017

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 )

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 22, 2017 Mar 22, 2017

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 23, 2017 Mar 23, 2017

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 23, 2017 Mar 23, 2017

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...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 23, 2017 Mar 23, 2017

Copy link to clipboard

Copied

Good idea, Jeff. Just added a comment to my initial bug on the Tracker site

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 12, 2018 Apr 12, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 12, 2018 Apr 12, 2018

Copy link to clipboard

Copied

Never mind, I got it to work .

Good fix, thank you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 10, 2018 Jul 10, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 11, 2018 Oct 11, 2018

Copy link to clipboard

Copied

LATEST

Did you get this one, with the inability to scroll, figured out? I'm seeing the same thing...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp