Useful CSS Stuff

You can use style.position: absolute to take a component out of a flex container and position it anywhere within the flex. For example to move it to the bottom, offset by 2px from the bot left and set its width to the width of the containing flex minus 4px to give a 2px offset from the flex side bounds:

style.
  position: absolute
  left: 2px
  bottom: 2px
  width: calc(100% - 4px)
  height: 4px

In some cases this is preferable to using a coord container. For example I use this to put icons (no priv, confirmation required, etc - these themselves are container within a flex) in the top right of my button template with exact size and pixel offsets from the bounds, regardless of the size the button is embedded as. You can't* do this in a coord container (*that I know of).

However, sometimes the positioned component will appear relative to the wrong outer container, eg in the top right of the entire page. In this case, add this into the containing flex container:

style.position: relative

I'm sure someone will pipe in with the reasons why this is needed and under what circumstances (i haven't found the time to look into it)

4 Likes