TOC with fixed width overlays buttons in some cases

Problem: Hi everybody,

I have some issues with custom made show/hide TOC buttons. Especially the position of the hide-TOC button is adjusted exactly to the boundary of a opened TOC, see first figure:

It works fine in the browser in default settings (full size, toolbar on…). When i use a fullscreen mode or a downscaled window, Active Presenter scales the content but not the width of the TOC. Therefore it looks badly (gaps) or in other cases one cannot close the TOC. For clarification see the second figure:

Do you know a solution how to avoid this behaviour?

ActivePresenter Version: 7.3.2

OS: Win10



The TOC is not the content of slide so its behavior is different. It is not possible to make it work by mixing content like above.

You can try adding following code into ActivePresenter > Project > Properties > Event:

$(".ap-toc-header").append("<div class='ap-toc-header-text'></div><div class='ap-toc-header-close'></div>").css("display", "flex");
$(".ap-toc-header-close").html("&#x1F5D9;").width("16px").height("16px").css("cursor", "pointer").on("click", function() {
    prez.variable("apTOCVisible", false);

FYI, the next version of ActivePresenter will allow customizing Player Components easily.


1 Like

Thank you phuongdv for explanation and the code. The solution is actually not bad, maybe i will try customize this a little.