# \[Resolved\] How to make a circular button in drag and drop?
**URL:** https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510
**Category:** Questions about Thunkable X
**Created:** [May 3, 2022, 7:55pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510 "2022-05-03T19:55:12Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [May 3, 2022, 7:55pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/1 "2022-05-03T19:55:12Z")
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:
In the browser preview, it looks right:
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?
---
### Author:  [@jared](https://community.thunkable.com/u/jared)
#### Post date: [May 3, 2022, 8:36pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/2 "2022-05-03T20:36:36Z")
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! 🙂
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [May 3, 2022, 9:27pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/3 "2022-05-03T21:27:16Z")
Yes please!
---
### Author:  [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [May 4, 2022, 10:25am UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/4 "2022-05-04T10:25:57Z")
> [@tatiang](#):
>
> I made a button component with width & height equal to 100. Done.
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.
---
### Author:  [@mimostel](https://community.thunkable.com/u/mimostel)
#### Post date: [May 4, 2022, 10:55am UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/5 "2022-05-04T10:55:23Z")
… I think that, after set absolute values for height/width for a button, and use something like this:
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.
---
### Author:  [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [May 4, 2022, 10:59am UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/6 "2022-05-04T10:59:31Z")
> [@tatiang](#):
>
> In the Drag & Drop interface,
@mimostel
See the first post, it says in the DnD UI. Will your blocks work in DnD?
---
### Author:  [@mimostel](https://community.thunkable.com/u/mimostel)
#### Post date: [May 4, 2022, 11:04am UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/7 "2022-05-04T11:04:19Z")
Gosh, I always forget about DnD as I’m using only StP 😇
My mistake
Doesn’t work in DnD as I don’t find any block to set button width/height 😊
P.S. One more reason for me to keep going with StP 🤣
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [May 4, 2022, 2:12pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/8 "2022-05-04T14:12:50Z")
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](https://x.thunkable.com/copy/b83d3ca0f5d0e5be873aaa2e2b9e7473)):
**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?
---
### Author:  [@jared](https://community.thunkable.com/u/jared)
#### Post date: [June 1, 2022, 7:16pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/9 "2022-06-01T19:16:09Z")
Hey everyone! Great update here!
@tatiang @mimostel @muneer
---
### Author:  [@mimostel](https://community.thunkable.com/u/mimostel)
#### Post date: [June 1, 2022, 7:23pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/10 "2022-06-01T19:23:31Z")
Great update…
But… again, is for DnD… As I started my main app here in StP, until I can convert to DnD, I’m struggle with that. And latest update just messed my app ☹
[Android Thunkable Live v.312-14 - Thunkable v.308-59-prod bugged? - Feedback - Community](https://community.thunkable.com/t/android-thunkable-live-v-312-14-thunkable-v-308-59-prod-bugged/1905736)
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 1, 2022, 8:12pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/11 "2022-06-01T20:12:34Z")
I appreciate that you’re working on a fix for this but I don’t think this is the right way to approach this.
For one thing, there is already a “Resize Mode” property:
Two properties with the exact same name but with different value choices and different functionality is going to be really confusing for people.
For another thing, this is something that should “just work.” It doesn’t make sense to me that we would want to toggle this on or off. It’s not the way it works in the StP interface, as far as I know.
If I make a circle, it should render as a circle whether it’s a browser preview, a web app, in Thunkable Live, or a downloaded/published app. Automatically, behind the scenes.
---
### Author:  [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)
#### Post date: [June 2, 2022, 9:20am UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/12 "2022-06-02T09:20:17Z")
If you ask me better test on android meaning the white bar should be medium sized.
this doesn’t solve the apk though.
---
### Author:  [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 2, 2022, 2:43pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/13 "2022-06-02T14:43:49Z")
> [@vishruth-ram](#):
>
> If you ask me better test on android meaning the white bar should be medium sized.
>
> this doesn’t solve the apk though.
What does this have to do with circular buttons?
---
### Author:  [@jared](https://community.thunkable.com/u/jared)
#### Post date: [June 2, 2022, 11:16pm UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/14 "2022-06-02T23:16:12Z")
> [@tatiang](#):
>
> Two properties with the exact same name but with different value choices and different functionality is going to be really confusing for people.
This will be updated in future iterations of the platform coming soon hopefully. The updates that I preview today will absolutely remove the confusion! I’m not sure when we’re going to release it yet but just know that we see you too and we’re going to get rid of that confusion.
> [@tatiang](#):
>
> For another thing, this is something that should “just work.” It doesn’t make sense to me that we would want to toggle this on or off. It’s not the way it works in the StP interface, as far as I know.
I think that there’s really valid use cases for both so I asked one of our engineers their input on why we would use either or and why we’ve defaulted to what we have and the following was the response which I think is pretty good
```auto
Use case 1. Expecting a component at the edge of the screen
If users wanted a component that was at the edge of the screen, it essentially wouldn't be possible with float in place.
Use case 2. Expecting an image to fill the screen.
If a user has an image that is completely fills the width of the screen in the designer, it should fill the width of the screen on the users' device. Float in place would put spaces on either side
In theory, we don't want to encourage building tablet/responsive apps on the phone designer. Users should use the tablet builder for tablet/large screen apps. In the context of building apps for phones, given how little the widths don't change that much on phones, stretch should generally be appropriate to maintain user expectations for the two points above.
For now, if a user really wanted float in place to be the default, they can create a group that covers the full screen and set it to float in place. It's an easy workaround.
```
---
### Author:  [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)
#### Post date: [June 4, 2022, 5:32am UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/15 "2022-06-04T05:32:24Z")
Your two screenshots are:
1. white bar is stretched so the button stretches sideways
2. white bar compressed, so the button stretches up&downwards.
---
### Author:  [@system](https://community.thunkable.com/u/system)
#### Post date: [September 2, 2022, 5:33am UTC](https://community.thunkable.com/t/resolved-how-to-make-a-circular-button-in-drag-and-drop/1860510/16 "2022-09-02T05:33:19Z")
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.