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

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

Explorer ,
Oct 08, 2020 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

198

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 ,
Oct 09, 2020 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.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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 ,
Oct 09, 2020 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 @Deleted User-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.

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 ,
Oct 10, 2020 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.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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 ,
Oct 12, 2020 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

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 ,
Oct 12, 2020 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.

 

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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 ,
Oct 13, 2020 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.

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 ,
Oct 13, 2020 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.

 

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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

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 ,
Oct 14, 2020 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?

 

 

 

 

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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

Copy link to clipboard

Copied

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.

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 ,
Oct 15, 2020 Oct 15, 2020

Copy link to clipboard

Copied

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.

 

 

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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 ,
Oct 15, 2020 Oct 15, 2020

Copy link to clipboard

Copied

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?

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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 ,
Oct 15, 2020 Oct 15, 2020

Copy link to clipboard

Copied

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.

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 ,
Oct 16, 2020 Oct 16, 2020

Copy link to clipboard

Copied

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?

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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 ,
Oct 21, 2020 Oct 21, 2020

Copy link to clipboard

Copied

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:

back forward there.png

 

 

 

 

 

 

 

 

 

 

 

 

 

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

back forward absent.png

 

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.

back forward cut off.png

 

 

 

 

 

 

 

 

 

 

 

 

 

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.

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 ,
Oct 23, 2020 Oct 23, 2020

Copy link to clipboard

Copied

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.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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 ,
Oct 23, 2020 Oct 23, 2020

Copy link to clipboard

Copied

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. 

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 ,
Oct 23, 2020 Oct 23, 2020

Copy link to clipboard

Copied

LATEST

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.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

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