Sidebar CSS incorrect leading to wrong indents

[ijsf]

I've ran into an issue similar (or identical) to #121. It seems that the sidebar renders classes with and without children with a wrong indent, and this is caused by inconsistenties between the original doxygen .arrow CSS class and the equivalent doxygen-awesome-css class.

One of the root causes is that, unfortunately, doxygen's navtree.js uses a lot of hardcoded pixel values, so it expects certain CSS behaviour.

Bug:

Original doxygen theme:

doxygen's navtree.js generates this for the childless classes:

<div class="item"><span class="arrow" style="width: 64px;">&nbsp;</span><span class="label"><a class="structj_1_1cvar.html" href="structj_1_1cvar.html">cvar</a></span></div>

and generates this for the classes with children:

<div class="item"><a href="javascript:void(0)"><span class="arrow" style="padding-left: 48px;">►</span></a><span class="label"><a class="structj_1_1draw.html" href="structj_1_1draw.html">draw</a></span></div>

The difference here is the arrow element and the use of width and padding-left. The width: 64px doesn't seem to work in doxygen-awesome-css since a <span> with a width element doesn't do anything unless display: inline-block is used. This is absent in the CSS while it is present in the original doxygen CSS.

The following additions from the original doxygen CSS to .arrow (https://github.com/jothepro/doxygen-awesome-css/blob/v2.2.1/doxygen-awesome.css#L846) seem to fix this bug:

display: inline-block;
width: 16px;

[jothepro]

Interesting. Can you give me guidance on how I can reproduce the issue?
What version of Doxygen was used? Is the issue present in all major browsers?

I cannot reproduce it on the demo page unfortunately, even though there seem to be elements with and without children in the same tree, at least in the root of the navigation tree:

[Rain1560]

I had reproduced this problem.
doxygen version : 1.9.8
doc.zip
and the darkmode doesnot work well.

[jothepro]

Thank you @Rain1560, with the given example I could reproduce a problem with the tree view navigation (although I am not sure if it is the same bug described by @ijsf).

In your case, it seems like the addition of the bootstrap.min.css in line 43 of the doc/static/header.html template is causing the issues with both the tree view and dark mode.
Removing the additional stylesheet fixes the problem. If you really need bootstrap.min.css, you might have to trace down what style override is causing the problems.

[Rain1560]

Thank you @Rain1560, with the given example I could reproduce a problem with the tree view navigation (although I am not sure if it is the same bug described by @ijsf).

In your case, it seems like the addition of the bootstrap.min.css in line 43 of the doc/static/header.html template is causing the issues with both the tree view and dark mode. Removing the additional stylesheet fixes the problem. If you really need bootstrap.min.css, you might have to trace down what style override is causing the problems.

I found this problem too. Thanks for your reply.