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?
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:
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) )
3 Likes
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.
I have the coordinate container in a flex container.
Maybe it makes the difference.
Should not matter, mine is in a flex container as well
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:
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.
My containers, the flex and coordinate are both set for grow 1 and shrink 1.
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.
2 Likes
Thanks so much!
Now that's an aggressive linter !
1 Like