Inspiring

StickyQuestion

Responsive HTML: Always show complete Toc

Forum|Forum|2 years ago
January 29, 2024
7 replies
1047 views

Hi,
I was wondering where I could change the behavior of the ToC for responsive HTML output when using the Azure_Blue Template.
Previously (RH 2017) on all devices (mobile, tablet, desktop) the ToC was shown nicely: When a book was opened - it unfolded and all the chapters were displayed - and still all the other books were visible.
Now (for mobile and tablet) the ToC display switches and only the opened book with the chapters is visible - the other books are gone and the user needs to tap on the opened book to switch back to the original view to see the complete ToC again. In addition the text "Skip to main content" is displayed. (For desktop it still behaves as RH 2017.)
Can anybody give me a hint on how to change the behavior of mobile/tablet ToC to always show the complete ToC, just "unfolding" the subchapters of an opened book?

This topic has been closed for replies.

R

Richard36853436mm2i

Participant

Thank you for the helpful advise. I too had same issue and resolved with a single change to Layout.css.

Changed the left property as shown below to have this section open further to the left. Hope this helps.

body.media-mobile div.sidebar-opened.mobilespecialfunctions, body.media-mobile div.sidebar-opened.filter-holder, body.media-mobile div.sidebar-opened.searchbar.layout-visible, body.media-mobile div.sidebar-opened.topic {

left: 85%; }

left: 35%; }

A

Amebr

Community Expert

Be careful doing this if you need to meet web accessibility guidelines as i think this item might be required.

Peter Grainge

Community Expert

Item 21 at RoboHelp Gems (grainge.org) will show the customisations you have made. Whether or not that helps you track which one caused the problem is another matter.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

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

Please use the photo icon to insert images within the post. Seeing an image inline with the text makes it easier for anyone answering or viewing the post.

Please create a new template as I'm not sure if Default uses one that exists.

Are you seeing this in a full size window?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

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

N

NoWeMAuthor

Inspiring

Hi,
I created now a new (compleately untouched) Responsive HTML 5 template "Azure_blue" and retried - the text is gone now! Although I am not aware of what I did wrong, it seems that my customization triggered this. So I will check my customization. Thanks!

N

NoWeMAuthor

Inspiring

For anyone who has encountered the same issue and is interested in how I resolved it:
My work around now is to delete all lines in the layout.css file that are related to the ".skip-to-content-container", and to add instead

.skip-to-content-container {
display: none;
}

Peter Grainge

Community Expert

Please use the term "Classic" if you mean the old UI, which is what I assume you mean.

Skip to main content

That normally occurs when the call to the help is a direct URL rather than it being called as described in RH2022 Calling Context Sensitive Help (grainge.org).

How are you calling the help?

Mangled TOC

When I first read your post I was thinking Skip to Main Content was appearing in the top right but then I magnified your screenshot and realised it was sitting on top of a very long topic title.

I think the first thing I would try is creating a second Azure Blue template with a slightly different name and no customisation. Do either or both problems occur then?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

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

N

NoWeMAuthor

Inspiring

Hi Peter,
thanks a lot for you help!
Unfortunately I made a mistake in my previous post - I meant RH 2017 (and not RH 2019).
In RH 2022 I click the "Generate" button to generate the Responsive HTML output and then click the "Eye" icon to see the output - in my case Google Chrome opens showing the Output including the "Skip to main content" text.
I also tried to open the output by clicking the index.htm in the ouput folder -> same issue.
I also tried to use Microsoft edge instead of google chrome -> same issue.
I created a new Responsive HTML5 Output Preset using "Default" as Template in the section layout -> same issue.
BTW I am using Version 2022.3.93

N

NoWeMAuthor

Inspiring

I attempted to use other templates, but they exhibited the same behavior. In the meantime, I discovered another "flaw" in RH 2022 when compared to the "old" version used for RH 2019. Perhaps someone can assist me with this issue. In the mobile and tablet variants, when opening the table of contents, a text is displayed: "Skip to main content" that cannot be hidden (or at least I did not find where to hide it). This text is always displayed and overlays the table of contents itself, frequently obstructing the user's ability to read the table of contents. Please see the attached image. Additionally, I do not understand why the text is present at all, as it appears to serve no function (what do I miss?).

Peter Grainge

Community Expert

You say "previously 2017). First thing to confirm is that you mean previously it was working on 2017 and now it isn't working on 2017 or you have upgraded and it's not working on the newer version of RoboHelp.

I think it is the latter as looking at 2019 Classic I am not seeing Azure Blue as an option. This looks like you upgraded to a New UI version as that would have switched you to Azure Blue.

You are looking at two different skins (templates as they are now known) and seeing designed different behaviours. What you see now doesn't surprise me as on a small device a fully expanded TOC would generally not be desirable, too much scrolling. I can't see anything to change that behaviour in the template editor.

The only thing to suggest is trying a different template. Note that frameless offers more customisation but offhand I don't think that is one of the options. You might though find a template that does work that way.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

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

N

NoWeMAuthor

Inspiring

I used RH 2017 and there existed a Screen Layout called Azure_Blue. In this layout the ToC was always displayed completely and books were just unfolded/folded - yes, the user had to scroll, but as we did not had too many books it was nice. Now I created a new project with RH 2022 (no upgrade of the old project, but starting from scratch) and I found a template called "Azure_Blue". I assumed that the old and the new one behave the same way, but the behavior of the ToC is different as upon opening a book, the view switches to show ONLY the opened book with subchapters.
As we really liked the bahvior of the "old" Azure_Blue I was wondering if I could somehow bring it to the new one.

Jeff_Coatsworth

Community Expert

Think you need to try out some more templates to see if any will give you the desired effect (I suspect not, since, as Peter pointed out, that's not an optimal experience with long TOCs). That might leave you having to have a developer hack the javascript to achieve what you want.

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