It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Floating TOC in the right column

Hi all,

I have a page with a two columns layout and I put a TOC on the right one. I would like to have the TOC always visible even though when I do scroll down. Is there any nice macro solution for this?

I get some results via CSS, setting a name for the div of the TOC and adding some CSS code like

.fixedPosition {   

    max-width:370px;    

    margin0 auto;      

    positionfixed;      

     top: 200px 

any better option?

Many thanks.

J

4 answers

2 accepted

2 votes
Answer accepted

@Davin Studer has your solution:

https://answers.atlassian.com/questions/285311

0 votes
Answer accepted

Thanks for this! I got decent results via CSS like this. It's a simple, half-transparent light gray box with a thin blue border that stays visible at the top right of the screen.

.toc-btf {
    float: right;
    position: fixed;
    width: 300px;
    right: 0px;
    top: 170px;
    background: rgba(229, 232, 232, 0.5);
    border: 1px solid #0096d6;
    padding: 5px;
}

This worked best when I put the TOC with the toc-btf class as the very first thing on the page.

The only annoyance is that other Confluence macros / page parts overlap the TOC in a distracting way. This is minor, but I would rather have the Note's yellow box be under, not over the TOC. If there is an adjustment I can make to CSS please tell me. 

I'm a space admin, not a Confluence admin, so my options are limited. I did see the linked solutions above but they're not an option for me.

overlap.PNG

Hello,
I have a solution for your problem. Just move the macro with CSS style to the end of the page so that all the other macros used on the page are above CSS style. See picture. :)

1.PNG2.PNG

That worked! Thank you!

This solution worked for us.

I got the TOC to float/sticky, thanks to the wonderful suggestions in this thread, but it only works in the preview mode, when I publish the page the TOC loses it's floating/sticky property. Has anyone faced this issue or am I missing something?

I am having this same issue. Has something changed due to an Atlassian update?

Same issue here. Works in Preview but not in Published mode.

Yep - exactly the same issue here - using the Cloud version. 

Ie. sticks perfectly in PREVIEW but scrolls once Published.

Has anyone found a fix to this one?

I use this css in a two column page layout, for a floating scrollable TOC on the right side.The two column page does not let the content overlap with TOC.

Screenshot:Screen Shot 2018-06-08 at 11.20.15 PM.png

 

CSS:

.rightFloat {
position: fixed;
height: 600px;
overflow: auto;
top: 100px;
}

 

I'll try that out. Thanks much!

Hi,

What is the macro that you've got the ccs stylesheet on the page?

In Other Macros, there is no such thing.

css.PNG

Thank you. 

Name of the macro is CSS Stylesheet. 

I disagree because there is no such thread on marketplace.atlassian.com. :(

 

https://marketplace.atlassian.com/search?query=CSS+StylesSheet

Boon Hui Tan Atlassian Team Aug 27, 2018

The CSS Stylesheet and div macros in the screenshot above is likely come together with the Content Formatting for Confluence plugin from Adaptavist

Gday team.

I see that this solution, to fix a TOC in place despite scrolling, has been defined using the option:

position: fixed;

I'm using the Cloud-based Confluence and this control seems to have no effect.  I can confirm that all other controls within work. Ie. the TOC is correctly placed on the page, the shading, height and width all effective, but the TOC still scrolls off the page - despite using a FIXED position.

I'd be very grateful to any wiz who can tell me what I'm missing - to make this work.  

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Jira Service Desk

[ Survey ] What does the future of ITSM look like? Take our survey today!

Hi all! We’re interested in learning more about your ITSM practices - what’s the current state of your ITSM practices? What are your aspirations for your IT team in the future? Which ITSM trends ar...

57 views 0 3
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you