search

jothepro / doxygen-awesome-css

Custom CSS theme for doxygen html-documentation with lots of customization parameters.
https://jothepro.github.io/doxygen-awesome-css/
MIT License
1.05k stars 118 forks source link

Sidebar CSS incorrect leading to wrong indents #126

Open ijsf opened 1 year ago

ijsf commented 1 year ago

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:

20230930 doxygen awesome bug

Original doxygen theme:

20230930 doxygen original

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 commented 1 year ago

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:

Bildschirmfoto 2023-10-06 um 15 29 11
Rain1560 commented 1 year ago

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

jothepro commented 1 year ago

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 commented 1 year ago

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.