Known Participant

Question

Text cut off in responsive HTML5 output

Forum|Forum|2 years ago
April 11, 2023
13 replies
2372 views

Hi All,

I'm using Robohelp 2022 to produce responsive HTML5 output. My problem is that text gets truncated when I try to view the published output on a mobile device. I discovered that the appearance of Y scroll bars can't be taken for granted, but even when I add an overflow staement to the css for 'body', I still get missing text. Yes, I guess I could shorten the topics a little, but they're not massively long so I'd rather not... Any suggestions would be most welcome. Many thanks

Output presets

This topic has been closed for replies.

A

Amebr

Community Expert

If I'm understanding right, you found the css you think is causing the problem with the iframe size. Add your changes to that style into a custom css file and add that file to the skin in the User Assets section of the skin. I posted an example screenshot of where to add the file earlier in this thread. The interface might be a little different but hopefully it gives you an idea where to look.

JoeInRoboHelp

Participant

Amebr,

I am attempting to implement your suggestion this morning and will let you know how it goes. Thank you for your reply.

I did get tripped up by RH moving the customization.css file from assets/css where I created it to skins/[skin name]. I was adjusting some settings and nothing was changing. My bad.

JoeInRoboHelp

Participant

I think this is going to work. It will be a month before I make it live on the WordPress site, but the issue was present when it was running locally and is now fixed locally.

Here is the only code in customizations.css in the skins folder:

iframe.topic {
    height: calc(100% - (4rem));
    }

Maybe it is supposed to be this way, but I noticed at desktop size that layout.css trumped customizations.css:

I wanted to add that this is where customizations.css is added:

And the results:

Its not perfect, but at least all of the content is visible.

Peter Grainge

Community Expert

So this is happening with your main project and the About RoboHelp sample project but not in a new project. Correct?

I'm stumped. Unless @Amebr or @Jeff_Coatsworth have any further ideas, I think it's time for Adobe Support. See https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp for your Adobe Support options. The email link tcssup@adobe.com is recommended as it reaches a team dedicated to Technical Communication Suite products including RoboHelp.

________________________________________________________

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.

M

Michelle LG

Participating Frequently

Thank you, Peter. I haven't tried generating with the sample project. I will try that and reach out to support. I will keep the community updated.

Peter Grainge

Community Expert

Oh, you said you had tried the sample. https://community.adobe.com/t5/robohelp-discussions/text-cut-off-in-responsive-html5-output/m-p/13720587#M149322

________________________________________________________

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

No worries. I'll help when you're ready.

________________________________________________________
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.

T

Tony_G8SEYAuthor

Known Participant

Sorry for the delay, Peter. I set up a deliberately long topic and all text was faithfully reproduced - except for the last line. Doubling up the padding on the bottom seemed to cure it. Thanks for all your help!

Peter Grainge

Community Expert

I have done nothing I am aware of to cause my topics to allow more content. My suggestion is you create a new project and fill the default topic with some content such as below.

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

Right at the end put END so you know whether or not you are seeing it all.

Put that on the server and test. If that works OK, create a topic in your main project in the normal way and run the same test. Do not import from the test.

Also then import a rogue topic from your main project along with its CSS. Test with that and then the default CSS from the test project.

Hopefully that will help track down the issue.

I will be offline for most of the rest of the day but I will look for your response.

________________________________________________________

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.

T

Tony_G8SEYAuthor

Known Participant

Thanks, Peter. I'll try that, but I've had a priority shift (like, thats new...) and I won't be able to get to it until next week.

Peter Grainge

Community Expert

@Tony_G8SEY I'm curious to know if the two additional links to RoboHelp generated topics that on a different server to yours show the same problem. It will confirm or disprove that being part of the problem.

________________________________________________________

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.

T

Tony_G8SEYAuthor

Known Participant

The links you posted work just fine. I sent them across to my mobile phone and everything was intact. Far more content than what my project's allowing. Pretty sure I'm doing something wrong, just don't know what.

A

Amebr

Community Expert

Here's an example of where to find the User Assets section of the skin. As I mentioned, it will vary depending on the skin and also which version of RH you have installed. Hopefully it points people in the right direction though.

T

Tony_G8SEYAuthor

Known Participant

Hi, yes I found that, but unfortunately I'm still getting truncated text. Maybe I'll try increasing the padding some more.

Peter Grainge

Community Expert

Try this topic on a different part of my site. Snippets (grainge.org) Tap Show All. I found the tables need some work but the key thing is all the topic was available on my phone. (Galaxy S9). That's not RoboHelp generated but it will tell us whether the issue is general or just RoboHelp outputs.

Then try these in the RoboHelp Tour.

RH2022 Importing/Linking Word/Fm Docs (grainge.org)

RH2022 Lists and Autonumbering (grainge.org)

________________________________________________________

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

OK but which topic suffered?

________________________________________________________

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

I don't think this has been reported before which seems odd. I would have expected someone to hit the issue.

So that I am clear, if you access a published topic in the About RoboHelp sample using a mobile device, then text will be clipped at the bottom, correct?

Please go to the RoboHelp Tour Introduction (grainge.org) where you will find much the same content. Go to the same topic that has the problem when you generate About RoboHelp and see if it occurs there. From what you say, it should. Please post a link to the topic in the RoboHelp Tour so that I can view it on a mobile.

________________________________________________________

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.

T

Tony_G8SEYAuthor

Known Participant

Yes, the sample was clipped. By and large the sample topics are quite small and don't present at problem. The topics with tables in them suffered, though. Amebr's solution may well have worked - just waiting for a web upload to verify.

Peter Grainge

Community Expert

I will leave @Amebr to deal with the CSS stuff. On a different note, I have used emulators way back and they are not always 100% reliable.

Try shrinking the window to phone size and see if the problem exists there. I know it's a different OS but it's a sign it might be the emulator. See their website to see if others have posted about the issue.

________________________________________________________

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.

T

Tony_G8SEYAuthor

Known Participant

Hi Peter. No, the problem is real. I published the projecet to a hidden corner of our website and I've checked with various mobile devices. It almost looks like there's a hard limit on the amount of content a topic can display on a mobile platform...

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