My custom widget doesn't display properly

Developer
1

Hello,
I have a long standing issue with custom widgets, where the HTML code they contain isn’t scaling properly when applied to the App’s canvas in Tulip. For example - here I’m applying 8 instances of a circle widget I’ve created to my app:
image
Please note that they are all w:180, h:180, so they should be identical, but they’re obviously not.
And the also look differently again when viewed in the Player:
image
Which is inconsistent and prevents me from planning my view.
And to top it all off, the view might change from time to time just by refreshing the page in the browser. Below, please notice that the bottom left circle suddenly grew to be the same size as the rest. Again, inconsistent and impossible to predict:
image
The code for the widget is fairly simple. I only change the color of the circle in JS via the Stroke style tag:

<body style="background:rgba(0,0,0,0);">
  <div id="container" class="container">
    <svg class="svg_class" viewbox="0 0 100 100">
      <circle
        id="back_circle"
        cx="50"
        cy="50"
        r="48"
        fill="rgba(0,0,0,0)"
        stroke=""
        stroke-width="2"
      ></circle>
    </svg>
  </div>
</body>

Did anyone else encouter this issue? Is there a way around it somehow?

2

what is the css?

for example, you might have to set the width and height to 100% of view area:

example below:

/* Styles for the container */
.container {
  width: 100vw; /* Set the container width to 100% of the page */
  height: 100vh;
2 Likes
3

Thank you William, that was it! Wow, you saved me a world of frustration :slight_smile:

2 Likes