Is it possible to add a horizontal scrollbar to an HTML5 multiscreen desktop layout?

Report · May 10, 2013

I'm wondering if there's any way to add a horizontal scrollbar to an HTML5 multiscreen desktop layout. We're trying to use the new screen layouts with a legacy project that was originally designed for the WebHelp Pro SSL. While most of the topics fit well, some are very wide (primarily because of screen shots), and the text is chopped off on the right hand side. If I hide the bar that shows the Contents, Index and Glossary, the topic expands to take the entire screen and all of the text is visible. Our long term goal, of course, is to modify the topics so that the screen shots are smaller and this is a non-issue. However, there are 1000+ topics in the project and we don't really want to wait to implement the new layouts if possible

Is there any way to add a horizontal scroll bar to allow the topic content to scroll? Thanks in advance for your help.

Report · May 11, 2013

Hi,

Which layout?

The following should work for all layouts. Just add it to the Screen Layout CSS:

div.wTopic { overflow-x: auto; }

Greet,

Willam

Report · May 13, 2013

Hi, Willam,

Thanks for your answer - it was very helpful. To clarify, I am using a layout based on the standard Desktop_Layout provided with RoboHelp.

I do have a follow-up question. Before I added the horizontal scroll bar, the topic title and text had a margin to the left. When I add the horizontal scroll bar, however, the text loses the margin and is squeezed directly against the left edge of the topic area. (My apologies for not include screen shots - I kept receiving an error when I tried to insert them).

Is there a way to change this behavior so that the topic retains the margin and includes the scroll bar, or is this a tradeoff of inserting the scroll bar?

Thanks again for your help,
Alison

Report · May 13, 2013

Hard to say without looking at the HTML of the page. Try the following:

Remove the CSS from my previous post and replace it by:

div.contentplacer { overflow-x: auto; }

Does that help?

Greet,

Willam

Report · May 17, 2013

Thank you again, Willam - I was able to use the first option with some additonal margin settings to correct the problem. It's nice to have the second option available as well.

All of your answers have been quite helpful!

Regards,

Alison