Inspiring

Question

RH Classic 2019 Responsive HTML5 output - Scrollbars not working in output

Forum|Forum|5 years ago
October 8, 2020
14 replies
514 views

I had been using WebHelp output for a long time but need to go to Responsive HTML5 now and am trying to give us a look and feel matching company guidelines. Colors have been done, images placed in header, etc., but when I generate output, the first time I look at my output on my local machine, the first page has a vertical toolbar that works, i.e., takes up two thirds of the column and can be dragged up and down to see the entire page but as soon as I change topics, the scrollbar fills the entire length of the space, regardless of whether the topic content is smaller than the window or larger and even using the up/down arrows, the content does not scroll in the window. Then when I go back to the first page, the scrollbar fills the entire length of the space and doesn't work as it should. Per an old post solved by Peter Grange, I found this in layout.css in a layout I had created as a copy of Desktop with Homepage.

body {
	font-family: MetricHPE, Arial, sans-serif;
	margin: 0;
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

I've tried commenting out the overflow line, tried changing it to specify just the vertical using overflow-y, tried changing to auto, scroll, you name it, nothing works. The scrollbar is not part of the Layout Customization menu for my layout so I can't figure out where else I might be able to change this. Any clues as to where I can change this so it works?

TIA

Helen

Classic

This topic has been closed for replies.

Show previous replies

Peter Grainge

Community Expert

I think I'm with you now. What you are saying sounds like the screen layout completely changing when the windows gets down to a certain size, correct?

That much is expected as that is what responsiveness is all about. If you are viewing on a Windows PC though using one of the main browsers, you should still see the scroll bars.

Please add a couple of screen shots so that we can see. Please use the photo icon to insert images within the post. Some supporters will not open attachments for security reasons as you have to save them before you can view them. If you do download, you are then not seeing the image inline with the text.

Then thanks to a quirk of this forum, if you do save the attachment, you then have to close the thread and reopen it before you can reply. Crazy but that's the way it is.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

TatuMbiliAuthor

Inspiring

Yes, the screen layout completely changes as the window is resized. In the first picture attached, if I pull the window wide enough or go full screen, a second interior scrollbar appears and that one works.

However, as in the second picture, if I make the screen smaller so the TOC collapses and the tabs shift to the left instead of on top, the inside scrollbar disappears and the outer one is non-functional.

Then if I expand the window again and the TOC expands with tabs back up above, the inside scrollbar does not reappear, I have to go to the next page that is longer than the window for it to reappear. Hence, as far as I'm seeing it, the responsive nature as you explain above is not functioning properly.

Peter Grainge

Community Expert

The keyframes stuff looks like it is from an output file and changing your source CSS is not going to hide your TOC. I'm lost.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

TatuMbiliAuthor

Inspiring

The keyframes stuff is actually from the layout.css in the two Responsive HTML screen layouts, one for the new project you asked me to set up and one from my old project. Also, I wasn't clear and have done a bit more experimenting, hope this can be a bit clearer.

When I referred to hiding the TOC, at a certain point if I narrow the output window, the TOC disappears and then the upper tabs move to the side and the TOC becomes hidden. I can still display the TOC by clicking on the icon to expand it even when the window is narrower. What I'm seeing is that regardless of which browser I'm using, Chrome in Windows or Mac, Safari or Firefox, at a certain point when I make the window larger, I lose the scrollbar on the right and have to rely on mouse scroll to go down to the bottom of the page. As well, my last text on a long expanded page, which is a Forward to the next page hyperlink, is below where a mouse scroll goes so I can't navigate forward from the page itself, I'd have to go back to the TOC and choose the next page.

I can't understand why it would do this, almost like there's something in the code saying if your page is bigger than this, none of the formatting you've done applies. There's a point where instead of my text expanding to fit its box, the right side of the window cuts it off completely. I'm pretty lost, as you can see.

Peter Grainge

Community Expert

OK re the name, it is an unusual spelling.

I don't know what post you were referring to an @xx-keyframes is not meaning anything to me.

Some screenshots would help. Please use the photo icon to insert images within the post. You have to save them before you can view them and then you are then not seeing the image inline with the text. Then thanks to a quirk of this forum, if you do save the attachment, you then have to close the thread and reopen it before you can reply. Crazy but that's the way it is.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

TatuMbiliAuthor

Inspiring

In another post you had suggested to compare the css files which is what I did. Went through each section and finally hit a difference with the section that starts this way:

/*Created with Adobe RoboHelp 2019.*/
@-ms-keyframes drill-down-up-mobile { from { margin-left: 25%; }
to { margin-left: -2.6em; } }

@-moz-keyframes drill-down-up-mobile { from { margin-left: 25%; }
to { margin-left: -2.6em; } }

As there were differences, I copied from the newly created project which was working properly to my existing one, saved and generated. What I see in the resulting existing project contracted window is the scrollbars functioning as usual but the TOC is not there. In the expanded window inclucing TOC, the scrollbar is there on the right but completely non-funtional, only way I can get up and down is with the mouse.

Peter Grainge

Community Expert

On the existing problem, see if you can recreate it in a new project that you would be able to share. Sometimes that makes you realise the cause of the problem. If not you can share that with me so that I can see the problem first hand.

That said, I would suggest that responsive help may not be your best way forward. In 2019 New UI and in 2020 there are frameless outputs. This is where most future development will be so you might be better off making the change. The RoboHelp Tour is an example of a frameless output.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

TatuMbiliAuthor

Inspiring

My issue with upgrading to 2019 New UI or 2020 was that I had previously gone from 2017 to 2019 to correct an issue with the TOC in Mac output being very messed up. Upgrading created many problems in my output so I then reverted to Classic 2019. Took me a week to correct what needed to be corrected to go forward. I've been wary ever since to upgrade and do not at the moment have a lot of time to invest in making sure that all issues are corrected.

The biggest issue with 2019 was that I couldn't connect to Source Control at all, my Team Foundation Server never appeared as a choice. Again, for the moment, lack of time is a huge issue here.

So, after doing as you suggest and I'm partly through, I get the following:

I replaced the @11114673-keyframes section as there things missing that were in the new sample project. That's the only thing I changed before checking my output again. The TOC/index/glossary panel opens as smaller and the scrollbars are there. If I click on TOC on the left hand side, the TOC expands, content portion gets smaller and I still have functioning scrollbars. However, if I expand my browser window so that the TOC expands and the four tabs are at the top of the panel, the scrollbars mess up again and don't function properly.

Sorry, Peter, I misspelt your name in original post. Thanks for your help.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded