Css rendering cause the geometric issue.

[martingg88]

Any idea how to solve this issue? u see the picture the circle is not on centre of + plus sign. I can't event click and drag seat cirle. Any idea? thanks

[Akalanka47000]

Hi @martingg88 would you be able to provide a minimal reproducible code snippet for this along the browser which you're using, else without these it's gonna be pretty difficult to look into this issue.

[Akalanka47000]

The last time I came across something this was due to incorrect calculations when zooming and panning through the workspace but that problem should no longer exist not

[martingg88]

here is the snippet.

<style> .area{ height: 100%; min-height: 100%. } </style>

<React.Fragment className="area">

<SeatToolkit
mode="designer"
events={{
onExport: (data) => {
console.log(data);
}
}}
/>

</React.Fragment>

It already cause the following issue at workspace for first rendering.

a. can't use the pointer to move around the seat (circle)
b. no event fire after click on the seat (circle)
c. the zoom/pan can't work as expected.

[martingg88]

It seems like another of my css library affect it after i instlal your library at pure blank page without any other css and it works.

In between, can u show me how to resize/re-layout the seat map when i resize the browser? thank you !

[martingg88]

I already found out the issue. if there is someting html element on top/bottom/beside and this library will cause miss calculation on svg workspace. for example as follows.

test.txt

[martingg88]

I already found out the issue. if there is someting html element on top/bottom/beside and this library will cause miss calculation on svg workspace. for example as follows.

test.txt

Finally found the exact css cause the issue. If you have "position: relative;" at the uppermost parent dom element and it will cauase the issue.

[Akalanka47000]

I already found out the issue. if there is someting html element on top/bottom/beside and this library will cause miss calculation on svg workspace. for example as follows.
test.txt

Finally found the exact css cause the issue. If you have "position: relative;" at the uppermost parent dom element and it will cauase the issue.

Thank you for identifying this. Ideally having relative anywhere else should not be a problem. I will check further when I get some free time