Highlighted

Keep TOC still when scrolling the topic?

Community Beginner ,
Jan 09, 2015

Copy link to clipboard

Copied

In Multiscreen HTML5 output, is there a way to keep the TOC on the left side of the screen from moving when I scroll the right side of the screen?

Topics

HTML5 layout

Views

242

Likes

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

Keep TOC still when scrolling the topic?

Community Beginner ,
Jan 09, 2015

Copy link to clipboard

Copied

In Multiscreen HTML5 output, is there a way to keep the TOC on the left side of the screen from moving when I scroll the right side of the screen?

Topics

HTML5 layout

Views

243

Likes

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
LEGEND ,
Jan 10, 2015

Copy link to clipboard

Copied

Yes, but it requires redoing some of the CSS of the layouts. Which layout are you using? - I believe the Social and Knowledge layout are already doing this.

Kind regards,

Willam

Likes

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
Reply
Loading...
Community Beginner ,
Jan 12, 2015

Copy link to clipboard

Copied

I'm using Desktop Knowledge, and it doesn't do it. I just tried Desktop Social, and its the same: the TOC scrolls up and down along with the Topic pane.

Can you guide me through redoing the CSS? 

Likes

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
Reply
Loading...
LEGEND ,
Jan 20, 2015

Copy link to clipboard

Copied

This was a bit more complex than I anticipated since the design really wasn't meant for this kind of thing. Here's how to do it:

  1. Open Layout.css in a text editor.
  2. On line 38, find div.sidebar.
  3. Replace the entire div.sidebar definition with:

div.sidebar {

  position: fixed;

  top: 0;

  left: 1.5%;

  bottom: 0;

  width: 27.9%;

  padding: 0;

}

div.sidebartoc {

  position: absolute;

  top: 11em;

  bottom: 0;

}

div.wVTabContentGroup {

  position: absolute;

  top: 6em;

  bottom: 0;

  width: 99%;

  overflow: auto;

}

It now seems to work fine.

Kind regards,

Willam

Likes

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
Reply
Loading...