Not sure technically in this instance, but setting visibility without it will simply hide the tab and not shift the others and take its place. It acts more like setting visible on a component in a flex, and adding position: absolute acts like display
Its the way the positioning works. Setting it to absolute will set it to 0,0 on a different layer basically. If you set two things to absolute and give them the same top and left they will be overlayed. Same thing is happening there.
I guess it also pulls it out of the flex that the other tabs are in which is why they're able to collapse the space
I wonder if you could replace
position: absolute
visibility: hidden
with
display: none
and get the same thing.
1 Like
Or possibly visibility: collapse
That didn't work, I did try that, still needed absolute
1 Like
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
Don't have anything clever to add but I just wanted to say this is a goldmine, thank you all for sharing! The composable style systems and repeating roller SVGs I thought we're especially awesome 
3 Likes
How can one create this style, so it can applied to components in the designer.
Thank you
Copy and paste the CSS into the Advanced Stylesheet in your project and save it.
Then on the component, set the props.style.classes to pulse-shadow
1 Like
If you don't see an advanced style sheet you need to add it to your project. You do this by right clicking on the "Styles" section and selecting the option for the advanced style sheet. I forget exactly what it says but I typically enable that on all of my projects these days.
3 Likes
That was definitely the intention of it!
1 Like