Strange resize problem. bug?

Using JavaScript with Hype
1

This is an extract from my project.
When trying to resize the circles all goes well. But the purple one with the border gets bigger than expected.
Further more all the other circles with border resize spontaneously.
Is this a bug?

  setTimeout(function(){ document.querySelectorAll(".root").forEach((node) => {
(node.style.width ='44px'), (node.style.height ='44px') ; }); }, 400);
  setTimeout(function(){ document.querySelectorAll(".terts").forEach((node) => {
(node.style.width ='44px'), (node.style.height ='44px') ; }); }, 800);
  setTimeout(function(){ document.querySelectorAll(".kwint").forEach((node) => {
(node.style.width ='44px'), (node.style.height ='44px') ; }); }, 1200);
  setTimeout(function(){ document.querySelectorAll(".septmin").forEach((node) => {
(node.style.width ='44px'), (node.style.height ='44px') ;  }); }, 1600);

oops, forgot the the project.
resize problem.hype.zip (10.6 KB)

2

Not seeing the spontaneose resize.. so not sure what you mean.

But the Purple circle is not getting bigger. It is the same size but with an outer border.
Also ny advise ir to use the Hype API to change the size.

Here is a quick example of how to do that..

Not in this example I have put a line above the circles to show you that the purple circle isthe same size. The top of the circle will be the outer border.

Run your resize and then drag the blue button onto the purple one.

resize problem_hpi.hype.zip (18.6 KB) .

See same size but with border.

Now do the same with this example to see why you should try and use the Hype API.

resize problem nhpi.hype.zip (18.7 KB)

2 Likes
3

Thank you for your fast response Mark.
In the beginning.... all circles are 34px. The purple (26px) with the border(4px) as well.
I want them to resize to 44px.
I can see that the purple inner circle is just as big as the other ones.
But that is not what I want. I want the circle including the border get to 44px.
update:
when I change the purple one to 36px it gets the same size. Problem is the border. That does not increase in size.

4

In Hype world (and the IDE) the border is counted as part of the circle. In regular CSS (and that is what you are using) the border is not part of the width/height. Either use the Hype API or set the CSS property box-sizing: border-box; although that can lead to some glitches in the IDE.

2 Likes
5

For some strange reason your hpi solution did not work the first time. But now it does. :astonished:
Thanks!

6

That's what I came up to. But everything's fine now. Thanks.

1 Like
7

Actually the problem is not solved. I've been working too long on this. It seemed solved because I changed the pixels to 36 instead of 44.
And in my project strange things still happen. Need to look at it tomorrow.