drop downs not working on iOS device

Community Beginner ,
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

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!

TOPICS
HTML5 layout

Views

751

Likes

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

drop downs not working on iOS device

Community Beginner ,
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

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!

TOPICS
HTML5 layout

Views

752

Likes

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
Mar 22, 2017 0
Adobe Community Professional ,
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.

Likes

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
Reply
Loading...
Mar 22, 2017 0
Community Beginner ,
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!

Likes

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
Reply
Loading...
Mar 22, 2017 0
Adobe Community Professional ,
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 )

Likes

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
Reply
Loading...
Mar 22, 2017 1
Community Beginner ,
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.

Likes

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
Reply
Loading...
Mar 22, 2017 0
Community Beginner ,
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!

Likes

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
Reply
Loading...
Mar 23, 2017 2
Adobe Community Professional ,
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...

Likes

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
Reply
Loading...
Mar 23, 2017 0
Community Beginner ,
Mar 23, 2017

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Mar 23, 2017 0
Explorer ,
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

Likes

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
Reply
Loading...
Apr 12, 2018 0
Explorer ,
Apr 12, 2018

Copy link to clipboard

Copied

Never mind, I got it to work .

Good fix, thank you.

Likes

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
Reply
Loading...
Apr 12, 2018 0
New Here ,
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.

Likes

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
Reply
Loading...
Jul 10, 2018 0
New Here ,
Oct 11, 2018

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Oct 11, 2018 0