# Moving components dynamically for placement into a dashboard component **URL:** \ **Category:** Ignition\ **Created:** [September 24, 2024, 6:31pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392 "2024-09-24T18:31:43Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [September 24, 2024, 6:31pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392/1 "2024-09-24T18:31:43Z")
I have some widgets that I want to make with the datepickers stacked on the bottom of a table within an embed. How do I make sure to move the table and the datepickers together as a dashboard is customized? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/41184ef1f6f897c64204c1c89188d4539c410713.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/db44f72bde77e178bd139ded4fda18290d7e11cc.png) ---
**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\ **Post date:** [September 24, 2024, 6:45pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392/2 "2024-09-24T18:45:51Z")
Use a coordinate container to contain the table + datepickers, you'll have to utilize `calc` on your datepickers' x and y location properties. The coordinate container should be set to fixed mode, with the table's width and height set to `100%` An example where the date pickers are in a container that sticks to top right: ![stickycoordinate](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/4/542f28c13fc102b1884de756d6f591d635e31646.png) 256px is the width of the container with the pickers + offset from right edge (i think 10 px? might be 20px) For sticking the picker to the bottom, your `y` property would be `calc(100% - (height of container/component you want to be sticky + offset from bottom edge) )` ---
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [September 24, 2024, 6:55pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392/3 "2024-09-24T18:55:14Z")
I am doing something wrong. I set one Y value for calc(100%-265px). I set the Y value for the endDate at calc(100%-140px). They are positioned in the same spot though. I also checked to be sure the coordinate container is in fixed mode. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/f/ef2eb53bb6f62089a00953c89db260d48de17122.png) I have the coordinate container in a flex container. Maybe it makes the difference. ---
**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\ **Post date:** [September 24, 2024, 8:36pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392/4 "2024-09-24T20:36:15Z")
> [@Zach\_Larson](#): > > I have the coordinate container in a flex container. Should not matter, mine is in a flex container as well > [@Zach\_Larson](#): > > calc(100%-265px). 265px seems very large, I think this needs to be on your `x` property, not your `y`. Your `y` should be something more like `calc(100% - 52px)`. Remember, x is horizontal location, y is vertical location. Also, if your picker is left of container center, you should be able to get away with just a number and no `calc` for your x value. The number would be the offset from the left edge in px. This worked for me, note the download symbol in the pictures: ![stickycoordinate1.png](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/d/9d16123a7abb92d49a64f15cd19590eec51bc3e4.png) > **Full screen** > > ![stickycoordinate2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/9/89f3966ccb1a09fc8611a1b626bebde30dbcc8a4.png) > **Small window** > > ![stickycoordinate3](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/b/cb84a50133414accf9f34d79a62ac811168e355a.png) ---
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [September 25, 2024, 2:00pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392/5 "2024-09-25T14:00:12Z")
I am in 8.1.42 I think I am doing something wrong. I put in calc(100%-52px) for the Y, and when I press the play button to test, the component is moving to the top. I have an error as well. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/6/d6bc648db3e9f2eeb476ce87d124c73009d9a8be.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1e685f3fc058091a7cc978fc6bd451697d7190f9.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a874000dfff1ca7dbd23cfb5be00ae8c1684623a.png) My containers, the flex and coordinate are both set for grow 1 and shrink 1. ---
**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\ **Post date:** [September 25, 2024, 6:16pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392/6 "2024-09-25T18:16:31Z")
> [@Zach\_Larson](#): > > calc(100%-52px) You don't have a space around the `-` in your calc expression, it should be `calc(100% - 52px)`. I just tried `calc(100%-52px)` and it snapped to top immediately. Using `calc(100% - 52px)` sticks it to the bottom edge as expected. Edit: Per the documentation: the `+` and `-` operators must be surrounded by whitespace. > **[calc() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc#rules_and_best_practices_while_using_calc)** > > The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used with , , , , , , , and values. ---
**Author:** ![Zach\_Larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zach_larson/32/54388_2.png) [@Zach\_Larson](https://forum.inductiveautomation.com/u/Zach_Larson)\ **Post date:** [September 30, 2024, 12:50pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392/7 "2024-09-30T12:50:02Z")
Thanks so much! ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [September 30, 2024, 5:55pm UTC](https://forum.inductiveautomation.com/t/moving-components-dynamically-for-placement-into-a-dashboard-component/96392/8 "2024-09-30T17:55:29Z")
Now that's an aggressive linter !