TOC positioning wrt to content in default css

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

TOC positioning wrt to content in default css

Frankie Liu
This post was updated on .
I have been staring at asciidoctor.css for a while trying to figure out how it achieves the position of both of these elements:
the toc with respect to the content.

This is what I know:

For toc-right there is an extra padding-right: 15em,
This is compared with at toc-left which defaults to body.toc2 which has a padding-left: 15em

But I have been trying to figure out how the toc2 and content are positioned with respect to one another to achieve the nice effect of one followed by the other. For example the toc element comes before content (in both cases), so that when the window becomes small enough, the toc pops to the top of the content (nice desirable effect). But I was wondering what makes toc-right show to the right of the content div (conversely for toc-left). And what sets the min window width threshold at which the toc pops to the top of the content.

I looked for different ways of achieving vertical split in css, but they all rely on some form of 'grid' like split of the horizontal space, but I don't think this is happening here, sorry for the newbie question. The closest that comes to this is using a float or a inline-block, both techniques not being used in asciidoctor.css. If you can point out to me how this is done, or can recommend some post/reference to how this is accomplished that would be greatly appreciated.

Related to this question is: what makes the toc independently scrollable wrt to the content?

Thanks in advance.
Reply | Threaded
Open this post in threaded view
|

Re: TOC positioning wrt to content in default css

Frankie Liu
I will try answer some of my own questions, but please feel free to make corrections:

1. The position is fixed, and setting left:0 or right:0 + top:0 makes the toc on the left and right respectively.

2. The @media screen and (min-width:768px) determines the threshold at which it switches to having a toc at the side(s).


It is still not clear if there is a setting that allows independent scroll bars for each of the div's.  Is this the default behavior, or is it set by some style?
Reply | Threaded
Open this post in threaded view
|

Re: TOC positioning wrt to content in default css

mojavelinux
Administrator
Frankie,

The answers to your own questions are spot on.

> a setting that allows independent scroll bars for each of the div's

I'm not sure what divs you're referring to. Could you elaborate?

Best Regards,

-Dan

On Sun, Sep 13, 2020 at 7:20 PM Frankie Liu [via Asciidoctor :: Discussion] <[hidden email]> wrote:
I will try answer some of my own questions, but please feel free to make corrections:

1. The position is fixed, and setting left:0 or right:0 + top:0 makes the toc on the left and right respectively.

2. The @media screen and (min-width:768px) determines the threshold at which it switches to having a toc at the side(s).


It is still not clear if there is a setting that allows independent scroll bars for each of the div's.  Is this the default behavior, or is it set by some style?


If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/TOC-positioning-wrt-to-content-in-default-css-tp8235p8249.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML


--
Dan Allen (he, him, his) | @mojavelinux | https://twitter.com/mojavelinux
Reply | Threaded
Open this post in threaded view
|

Re: TOC positioning wrt to content in default css

Frankie Liu
Hi Dan,

When the window shrinks, the toc gets a scrollbar, I was wondering what was setting that, I found that it is the

overflow: auto

It is interesting that the content gets the page's scrollbar, while the div for the toc gets its own.
I was wondering how they can operate independently, so the above (overflow) seems to do the
trick.

-frankie
Reply | Threaded
Open this post in threaded view
|

Re: TOC positioning wrt to content in default css

mojavelinux
Administrator
> I was wondering how they can operate independently, so the above (overflow) seems to do the
trick.

That's correct.

-Dan

On Mon, Sep 14, 2020 at 3:18 PM Frankie Liu [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi Dan,

When the window shrinks, the toc gets a scrollbar, I was wondering what was setting that, I found that it is the

overflow: auto

It is interesting that the content gets the page's scrollbar, while the div for the toc gets its own.
I was wondering how they can operate independently, so the above (overflow) seems to do the
trick.

-frankie


If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/TOC-positioning-wrt-to-content-in-default-css-tp8235p8256.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML


--
Dan Allen (he, him, his) | @mojavelinux | https://twitter.com/mojavelinux