Helicorder in a Bootstrap card fails to display the UTC and/or UTC and Local y-axis labels

[rbeerster]

If you place a helicorder display in a Bootstrap card, the UTC and/or UTC and Local y-axis labels will not show up due to the z-index being set to -1 at https://github.com/crotwell/seisplotjs/blob/e51d5ee15d2d187cce73ae8bb5e695512b820254/src/helicorder.ts#L322.

[crotwell]

My understanding is that z-index can be a negative number. See:
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Understanding_z-index

It is unclear is you are saying that seisplotjs should not use negaive z-index, or if you are asking for a workaround for an issue with Bootstrap.

[rbeerster]

Yes, the index value can be negative. Do you have a suggestion for a workaround or is this a code change on your end?

[crotwell]

I haven't used bootstrap cards, so do not have any suggestions. A quick look at their documentation didn't show anything that makes me think using -1 is a problem. Are you sure the issue is caused by seisplotjs and bootstrap, and is not in your code?

[rbeerster]

Bootstrap uses z index values starting at 0 and above. Therefore, setting a z-index equal to -1 in a style (.utclabels div) will place the y-axis labels underneath any Bootstrap component. My quick workaround was to edit your code and set the z-index to 0.