How to make a circular button?

It should be simple to make a circular button, right? In the Drag & Drop interface, I made a button component with width & height equal to 100. Done. It looks like a circle:

image

In the browser preview, it looks right:

image

But when Live Testing on an iPhone, it gets stretched:

I assume this is because of the white bar area at the bottom of the screen. The same amount of vertical space in the browser has to be squished to fit a smaller amount of vertical space above the white bar. Okay, that makes some sense.

But when downloaded on an iPhone 11, it still gets stretched:

Shouldn’t the final version of my app display a circle when I created a circle? What’s the fix for this? I really don’t want to adjust the height and width to unequal values to make the shape appear as a circle.

Is there a way to set the dimensions of the screen to better match my device?

1 Like

I’m excited to mention our layouts component that should be released sometime in the near future hopefully!

That will bring back the flex environment to drag and drop. We’re brining back rows and columns yall! It’s just not ready to go live yet. I’ve done some testing and it’s dope, it’s just not 100% ready yet!

If we do user beta testing, i’ll be sure to ping you for that! :slight_smile:

3 Likes

Yes please!

This should not make a visually rounded button unless you use a square device’s screen.

According to the documentation, Thunkable uses the screen size of 375x669 to import Figma files so if you use the same ratio you should get a nearly circle button. You are right because you can never know who will use your app and in what screen dimensions.

So for every 100px of width you should have about 88px of height.

… I think that, after set absolute values for height/width for a button, and use something like this:
screen
you don’t have to take care about other ratio, no matter the screen.
You need to use that repeat while block tho, to let the app have time to display and have computed value.

@mimostel
See the first post, it says in the DnD UI. Will your blocks work in DnD?

1 Like

Gosh, I always forget about DnD as I’m using only StP :innocent:
My mistake
Doesn’t work in DnD as I don’t find any block to set button width/height :blush:
P.S. One more reason for me to keep going with StP :rofl:

1 Like

But this is unique to the DnD interface. In StP, circular buttons appear as circles. That’s why I was surprised to find that the DnD interface stretches them.

This is a 100x100 circle in StP (project link):

Live Test:

Downloaded app:

So I assume Thunkable is resizing components in the background to fit them onto a non-square screen. Why can’t that be done for the DnD interface?

2 Likes