My semi-circular progress Bar is appearing above my navigation bar
Posted by Vyshak K at 09:20 on Tuesday 21st June 2022[link]
I have a fixed div to show the main heading of my page. This div will remain fixed if I scrolls down/up the page. Below this div, I have placed a SemiCircularProgress chart. And now when I scrolls up my web page this chart scrolls above the fixed div as shown in the screenshot attached. It should not. It should go behind the fixed div. I have tried with bar and line chart of Rgraph. which is not showing this issue.
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.semicircularprogress.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.js"></script>
Seems like RGraph.semicircularprogress.js causing the issue. I have tried to place the canvas inside a div and set it's style as style="z-index: 0;position: relative". But no change in the result.
Please help.
Attached image:
Posted by Richard at 10:02 on Tuesday 21st June 2022[link]
Try setting the z-index of the navigation bar to a high value. For example, the black navigation bar on this website has a z-index value of 1000.
z-index: 1000
Posted by Vyshak K at 10:06 on Tuesday 21st June 2022[link]
Thankyou so much. Resolved.
Posted by Richard at 13:20 on Wednesday 22nd June 2022[link]
After looking into this a bit more, it seems that it may be being caused by the DOM text code, which necessarily manipulates the DOM structure and wraps the canvas in a DIV tag.
So another option to resolve this would be to turn off accessible text, which you can do like this:
textAccessible: false
Posted by Vyshak K at 05:55 on Thursday 23rd June 2022[link]
Z - index is removed and added the textaccessible as above. But shows same issue.
Posted by Richard at 11:00 on Thursday 23rd June 2022[link]
Ok, I've set up an example here:
[REMOVED]
I noticed that setting "position: relative" on the canvas caused it to appear above the top nav bar - so if you can try removing that.
Or just go back to setting the navigation bar back to having a z-index value of 1000 - I would imagine that you'd always want the nav bar on top of everything so it makes good sense to me to do that.
Posted by Vyshak K at 12:01 on Thursday 23rd June 2022[link]
Yes it is working with z-index value of 1000. I will try with the relative option too. Thankyou for the quick response.