# How to change the margin of a component in code **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [April 30, 2021, 4:15pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462 "2021-04-30T16:15:51Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [April 30, 2021, 4:15pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/1 "2021-04-30T16:15:51Z")
How to change the margin of a component in code? Can we? I want to set the background colour of a button depending on the height the user entered. But the height should show from a beginning line. Let’s say I have a starting line and depending on the height the user entered I have to decrease the height from a starting line. ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [April 30, 2021, 4:21pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/2 "2021-04-30T16:21:11Z")
Hi @charvi2k9gsbk2i, welcome to the Thunkable Community 👋 I’m not fully sure what you’re trying to do - but I think you’re wanting to change the border or margin of a component, when the app is running, via blocks, is that right? It depends on the components you’re using, but in most cases (for now at least) there’s no way to change the border dimensions in blocks. What sort of app are you trying to build? ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [April 30, 2021, 5:42pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/3 "2021-04-30T17:42:52Z")
So basically in one of my screens i want to add a bar graph feature without using any kind of 3rd party app. The and bar graph value should change depending on user indirect value. I hope ur understanding what im trying to say. So, is there any component we can use to change the margin of a component in the code? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [April 30, 2021, 5:55pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/4 "2021-04-30T17:55:09Z")
Yes, this can easily be done using the way you described because you are changing the size, height and width not margin ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 12:09pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/5 "2021-05-01T12:09:44Z")
yes sir, but after I change the height it is decreasing its size at a position that I have other components. as I said I’m making a bar graph and I want it to colour the value depending on a formula im performing and decrease its increase size accordingly but start from the beginning value that’s at 0%. Hope you understood ? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 1, 2021, 1:07pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/6 "2021-05-01T13:07:53Z")
I made a quick mock up to show what I mean. You may use it as a start and enhance on it [https://x.thunkable.com/projectPage/608d4c470e17710011171894](https://x.thunkable.com/projectPage/608d4c470e17710011171894) ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:21pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/7 "2021-05-01T13:21:06Z")
thank you sir will this work by the formula like eg x/total x 100… Whatever percentage i get referring to that the bar graph should change? ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:32pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/8 "2021-05-01T13:32:44Z")
why is the list viewer component used? For user to check from 1 to 5? ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:33pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/9 "2021-05-01T13:33:17Z")
so it shouldnt depend on what user entered it should depend on formula ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 1, 2021, 1:33pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/10 "2021-05-01T13:33:28Z")
You need to check it. I did it quickly as proof of concept and did not code every possible scenario in it ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:33pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/11 "2021-05-01T13:33:56Z")
will it work sir? ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:34pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/12 "2021-05-01T13:34:04Z")
the way i want ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 1, 2021, 1:35pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/13 "2021-05-01T13:35:40Z")
I just chose the list viewer to restrict the user on the selection of bars in the chart. You can choose the way you like and this is not an essential part of the solution. The solution is to draw a Bar Char using only Thunkable. ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:36pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/14 "2021-05-01T13:36:37Z")
so sir i need to use a column instead of a button. Ok let me try it like that ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 1, 2021, 1:38pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/15 "2021-05-01T13:38:06Z")
I thought a row/column is more appropriate for the situation but you can choose other components should you wish to. ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:44pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/16 "2021-05-01T13:44:17Z")
ok sir ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:55pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/17 "2021-05-01T13:55:16Z")
![Image 01-05-21 at 7.24 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/9/391ef81cf79d10864085abd04b72ae33c788c2db.jpeg) ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 1:55pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/18 "2021-05-01T13:55:41Z")
will this work? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [May 1, 2021, 2:18pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/19 "2021-05-01T14:18:15Z")
I don’t know. You need to test and see the outcome. ---
**Author:** ![charvi2k9gsbk2i](https://avatars.discourse-cdn.com/v4/letter/c/839c29/32.png) [@charvi2k9gsbk2i](https://community.thunkable.com/u/charvi2k9gsbk2i)\ **Post date:** [May 1, 2021, 2:18pm UTC](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462/20 "2021-05-01T14:18:29Z")
its not working. [Next page](https://community.thunkable.com/t/how-to-change-the-margin-of-a-component-in-code/1255462.md?page=2)