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

New Here ,
Oct 08, 2020

Copy link to clipboard

Copied

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

TOPICS
Classic

Views

74

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

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

New Here ,
Oct 08, 2020

Copy link to clipboard

Copied

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

TOPICS
Classic

Views

75

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
Oct 08, 2020 0
Adobe Community Professional ,
Oct 09, 2020

Copy link to clipboard

Copied

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.

 

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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 09, 2020 0
New Here ,
Oct 09, 2020

Copy link to clipboard

Copied

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

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 09, 2020 0
Adobe Community Professional ,
Oct 10, 2020

Copy link to clipboard

Copied

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.

 

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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 10, 2020 0
New Here ,
Oct 12, 2020

Copy link to clipboard

Copied

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. 

 

contracted window.pngexpanded window.png

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 12, 2020 0
Adobe Community Professional ,
Oct 12, 2020

Copy link to clipboard

Copied

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.

 

 

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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 12, 2020 0
New Here ,
Oct 13, 2020

Copy link to clipboard

Copied

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.

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 13, 2020 0
Adobe Community Professional ,
Oct 13, 2020

Copy link to clipboard

Copied

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.

 

 

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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 13, 2020 0
New Here ,
Oct 13, 2020

Copy link to clipboard

Copied

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. 

 

expanded 2 scrollbars.png

 

 

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.

 

contracted 1 scrollbar.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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.

 

expanded no scrollbars.png

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 13, 2020 0
Adobe Community Professional ,
Oct 14, 2020

Copy link to clipboard

Copied

I have edited your post to put the description of what happens in each screenshot immediately above it. Please use the Blue button on the web as for some reason the forum made it difficult to separate those images. I have also just found that if you now resize the forum window it is still messing up so I will try to fix that next.

 

Please go to https://www.grainge.org/pages/authoring/rh_tour/introduction/introduction.htm and try the same exercise. For me that is working and the scroll bars remain visible on a Windows PC using Edge.

 

If you find the same then it pretty much establishes the issue is project specific but not why. To prove that also generate the About RoboHelp sample project and check that works correctly.

 

Assuming it does, create a new copy of the same skin and a new preset. Does that fix things?

 

 

 

 

 

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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 14, 2020 0