"2D Text Tag" not visable when using API embedded model

[rhino16 (Mirek)]

Im using the following dimensions cluster:

Linear dimensions. Display issues

Hi @beshkaryn, you can check the script/cluster that we created to do the dimensions shown in that demo link you refer to here: DimCluster.gh (99.3 KB) Hope this helps.

For some reason the dimension/font wont show up in the api embedded model but in the shapediver frontend (iframe version).
Is there any css rule or JS attribute I need to use to make it work?

Thx!

[pavol]

You don’t need any CSS for the dimensions to show up but we have developed a new C# script for dimensions which is more optimised and has additional features for DXF exports. Try replacing the old cluster and let me know if you still have issues with displaying the dimensions.

DimC#.gh (37.3 KB)

Also, find code examples for direct embedding and more in the CodePen library.

[rhino16 (Mirek)]

Thank you Pavol,

Unfortunately the problem still exists. It seems like the “Text Tag” component is not rendered in the embedded viewport.

[rhino16 (Mirek)]

It seams like you are using HTML/CSS for “Text Tag” components rendering.
I just found this:

Unexpected Text Tag behaviour in API

The 2D text tags in the viewer are html elements in an overlay on top of the 3D canvas. Therefore, in order to position correctly, make sure you include the css file in your header: <link rel='stylesheet' type='text/css' href='https://viewer.shapediver.com/v2/2.23.0/sdv.css'> If that doesn’t solve your issue, make sure your css stylesheet does not override any additional styles associated with ShapeDiver (by using !important for example). I have created a page with your model without issues.

So Im wondering:
If this is the case, what is the defined CSS class for making “Text Tag” visible?

[pavol]

Yes, you are right 2D tags (unlike 3D text) are HMTL elements rendered on top of the viewer and need CSS. Please make sure that the class shapediver-domElements has position absolute and let me know if you still experience any issues.

[rhino16 (Mirek)]

Hi Pavol,

I copied the classes .shapediver-domElements & .shapediver-domElement
from here https://viewer.shapediver.com/v2/2.23.0/sdv.css into my page and the tag text is finally visible now - but the positioning of the text ist not correct or as it usually is in the native shapediver iframe view (centered?)

[rhino16 (Mirek)]

Is it possible that https://viewer.shapediver.com/v2/2.23.0/sdv.css is outdated or not the same as the iframe version?

I have the same offset behaviour when I embedd the full style sheet.

[pavol]

It might be something in your code that overrides the style of those 2D tags. Could you check? Also, feel free to share the link to your website so we can get a better idea about what’s happening there.

[rhino16 (Mirek)]

Its a modifyed version of one of your tutorials:

Editor Basics - JSFiddle - Code Playground

There is almost no CSS

[rhino16 (Mirek)]

Similar as proposed here:

Unexpected Text Tag behaviour in API

I’ve solved the issue by adding “shapediver-viewport-flex landscape” to the class attribute of the HTML element used as the container in ReactDOM.render().

I addded the shapediver-viewport-flex landscape classes to my shapediver container div.
Didnt get what the causing issue is but apprently this fixes it. Props also to Winston