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.

Peter Grainge

Community Expert

Basically if you should only edit in the skin editor. Any changes in layout.css should only be made by those with sufficient knowledge to get out of trouble when they find themselves in it. 🙂

Sometimes you may get lucky and someone will know how to fix a particular issue but mostly that doesn't happen. There was also the danger if you did customise in that way Adobe would then update the skin and that would mess up your customisation.

You would find this a whole lot easier if instead of continuing in Classic you changed to 2019 New UI or better still 2020. Classic does not ship with 2020 and that's a sign it will not be supported further down the line. More to the point, the new UI is where development is occurring and in frameless skins. Responsive skins will continue to be supported but the development will be in the frameless skins.

The new UI is a learning curve but as you are going to have to go there sometime and it makes more sense to upgrade to frameless, that would be what I would look at if you can.

Frameless skins have way more customisation options in the skin editor than responsive ever had or will have. That would include make the logo space bigger.

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

TatuMbiliAuthor

Inspiring

Ah, I had thought that because I was editing layout.css within RoboHelp by right-clicking in the Screen Layout, choosing Edit and ending up in the RH Styles window, any edits I made would be ok in RH. I'm not opening layout.css and editing it outside of RH, just using the tools I see in RH so to change the bottom margin, going to Div/body.media-desktop div.topic, and changing the bottom margin to push those back/forward links up so they are visible. So then my question becomes, how would I achieve what I need with the tools in RoboHelp such as Layout Customization? An example would be that the logo size is too small and I cannot change that size in Layout Customization.

Peter Grainge

Community Expert

I hadn't realised you have been editing layout.css. Once you dip into editing that file you open a can of worms. It's complex and can easily break things. That's why I don't touch it. Sorry I can't help with that.

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

TatuMbiliAuthor

Inspiring

I've created a new responsive layout, what I think you meant by a new skin in your last message. From there, I changed one thing at a time and verified each output before moving to the next. Each verification was expanding and contracting the window, minimizing/maximizing the TOC and again expanding and contracting the window to make sure the scroll bar did not disappear or freeze as with the last pictures I'd shown you. With the last change, I increased the bottom margin in layout.css at body.media-desktop div.topic, changed from 0 to 10px as back/forward nav links were being cut off, i.e., I could see the tops of the text, cursor changed to select hand but it wasn't the entire text being seen. This is the first of the results:

In this one, the TOC, indes and glossary tabs are on the side. One small pull to the right further and I get this:

Note that now the TOC, index and glossary tabs are now at the top. In addition, the visual presentation of the scroll bar is different, it's now significantly thinner than the first example.

Also note that the last line with back/forward text is completely gone. The disappearing back/forward line is not present in all pages but a significant number in my project. There is no consistency as to where the lowest line shows up when scrolled all the way to the bottom, sometimes it appears just above the bottom on the window, sometimes slightly above. Here's another example where you can see the different text displays on the last line.

I don't know why this one change in layout.css should have been so destructive to my output, especially as I did it from within the Styles box in RH Classic.

Again, TIA for your help.

Peter Grainge

Community Expert

Yes I note the issue is the scroll bar freezes in your project. Did you try creating a new skin and applying that to see if the issue is with your existing skin?

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

TatuMbiliAuthor

Inspiring

Checked Travel the Whirls as well, it works as expected.

The issue isn't that the scroll bar is appearing when content isn't long enough, it is that when content is longer than the page, the scroll bar although it appears, does not function. It shows up but is the full length of the window and then doesn't move the content when dragged down. This issue is only there when I expand the browser window is a certain size, that size including full screen. The point where it changes is when the desktop sidebar opens. Right at that point, the right scrollbar which scrolled properly before, jumps to the full length of the window and stops functioning.

Peter Grainge

Community Expert

I just generated another project in 2019 Classic and that is working correctly.

On the right the scroll bar should only appear when the content is long enough. Have you checked the source topic does not have a load of empty paragraphs below when it has scroll bars that you think should not be there?

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

Peter Grainge

Community Expert

It's for me to apologise. About RoboHelp is new UI. Classic has two sample projects Travel the Whirls and Employee Care.

Try a responsive skin in Classic with one of those projects. If that works it does confirm it's something in your customisation so you will not be wasting time poking around there.

Let us know what you find.

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

TatuMbiliAuthor

Inspiring

I'm confused, I can't find an About RoboHelp sample project, just Travel the Whirls. What skin? I'm assuming I'm using the Default skin as I definitely haven't chosen Beautiful Vista Flash. And preset? Is that the Screen Profile? Screen layout? I'm using the Desktop screen profile and the Azure Blue Responsive screen layout with modifications in the layout.css or the Layout Customization window for colour, font, image in header, header text.

On your Robohelp Tour page, everything works correctly. That was done in RH 2020, was it not? And is frameless? As I said, I can't take the time to make sure that nothing goes wrong in my updating from Classic 2019 to 2020. I realize that I'm now wasting time trying to fix this in RH Classic 2019 but having done that before with RH2019, I'd rather fix it now and take the time after my deadline has passed. It should work, it's working when I do a new project. I guess I have to go back to trying to compare layout.css line by line between the new project that's working and my project. If I can fix it, I'll post where it went wrong.

Thanks for your help and sorry if I've wasted your time with this.

Peter Grainge

Community Expert

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?

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

Show more replies

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