Shifted elements

[Matt]

Hello everyone,

currently I am working on a uni project which includes different boards with curves in three full page tabs.

I used this for my tabs: https://www.w3schools.com/howto/howto_js_full_page_tabs.asp

Now it was no problem to include the JSX boards in the different tabs. However, when I open tab 2 and 3, all the elements like inputs, axis labels and texts are shifted slightly
downwards (about 20px or so).

Even though the coordinates are the same as on the board in the first tab which opens when I first load the html page, they are clearly not at their correct coordinates.

Funnily enough the text elements jump into their correct position once I
change the value of the sliders which update the formula they text elements display.

Therefore I believe the issue could be fixed if I "updated" all the elements once I open the tab. There are some methods like this in the JSX reference but I tried them and did not have any success so far.

Also I am a bloody beginner when it comes to HTML/JS/CSS which I all had to learn from the start for this project.

Any advice is highly appreciated.

[Murray]

Hi Matt

Please provide a link to a complete working example (best) or the complete page code so we can better analyse what's going on and help you.

Regards,

Murray

[David Flenner]

Matt,

I ran into the same issue some time ago when I was creating a multi-tab calculator for statistics students. I had even used the same multi-tab example code from w3schools! Anyway, I don't remember exactly what the problem was, but the way I fixed it came down to setting three different flags when creating text, input, and button objects: anchorY: 'top', frozen: true, fixed: true.

I ended up created JSON objects that would set the basic parameters for each:

var textParam = {

fontSize: 18,

frozen: true,

fixed: true,

highlight: false,

anchorY: 'top'

};

var inputParam = {

fontSize: 18,

cssStyle: 'width: 100px',

frozen: true,

fixed: true,

anchorY: 'top'

}

var buttonParam = {

frozen: true,

anchorY: 'top'

}

Hope that helps!

-David

[Alfred Wassermann]

Yes, please create a jsfiddle - or something similar.

The problem seems to be caused by a CSS problem:

It may be that an inactive tab has a different size then an active tab.

A possible solution could be to add an event handler which handles the switching of the tabs.

There you have to call "board.update()" or even "board.setBouningBox()" (https://jsxgraph.org/docs/symbols/JXG.Board.html#setBoundingBox)

Best wishes,

Alfred

[Matt]

Thank you everyone.

I would have uploaded a version of my code but in fact Davids method worked!

It is really nice to get such quick help concerning JSXgraph in this group.