![](https://miro.medium.com/v2/resize:fit:700/1*g5J8tfCIoyuNUuigzSeRNg.jpeg)
Hiding an Element When There Is No Enough Space — Thanos Snap Technique
How many of you heard and used “Media Queries”? Of course dude !! These are basics for Responsive Web Development. Ok cool, now tell me this, how many of you heard about “Container Media Query”? Not with respect to device or print but wrt width, ability to control styles according to an element’s container width. Is your answer, Yes…No…or May be…. What about, The Fab 4 technique? How would an element behave if you give width, min-width, max-width? To know the answers for all these questions, please read further.
Challenge: Recently as part of implementing a horizontal timeline component in our product, our designers came up with a requirement that the timeline stage names should be hidden when there is no enough space. Below is a very rough design implementation of timeline component showcasing the behaviour of it when there is space vs when there is no enough space.
![](https://miro.medium.com/v2/resize:fit:1000/1*7GzVrNWMELdgV_UAgPMOTw.png)
![](https://miro.medium.com/v2/resize:fit:1000/1*1crafVhStX-XP3zIHiWNNQ.png)
When we say “no enough space” this could be because of
- Very less window size or viewport size (or)
- Because of the container element width (the timeline component is wrapped inside some fixed container or in one the 2/3-column layout)
To address the first constraint we have media queries to our rescue where we can hide the text with a very simple media query style. But the problem we are trying to address is the second one where the component is constrained by some container element. Currently, in CSS there is no provision to query the container element width and adjust the styles accordingly. Please see this link for more discussion on container query.
The only feasible solution I thought was that of using javascript before seeing this wonderful article, fab four technique to create responsive email without media query. This inspired me why not use the same technique even in this case here. The basic principle which is used in our current scenario from the above article is:
“If max-width is lesser than width, max-width wins. If max-width is greater than width, width always wins.”
Before getting into the explanation of the solution, please see the sample code of the rough implementation of the timeline component.
To reiterate we would like to hide the timeline stage names when there is no enough space (because this crumbles the stage names, ellipsizing the names is not so useful too), but we should never hide the current stage name. So we were able to fix the issue using the below code:
.event .stage-name {
max-width: max(0px, calc((100% - 120px)*999));
overflow: hidden;
}
Breaking the code —
![](https://miro.medium.com/v2/resize:fit:470/1*ML3AdwmNSSmtpEO7ngZzlg.png)
- 120px is the cut off /threshold width we have set for our event stage name, implies if the stage name’s calculated width is less than 120px it should hide.
- Now calc (100% — 120px) will be a negative value if the container width (event entity calculated width) is less than 120px or if it has no enough space.
- Again max (0px, some negative value) is 0px generating a 0px max-width for our event entinty stage name, hiding the text when there is no enough space.
- If calc (100% — 120px) will be a positive value if the container width is greater than 120px or has enough space, this will lead to cropping of the text arbitrarily.
- To solve this, make the max-width so high by multiplying with 999 (or something higher — calc((100% — 120px)*999)), making the max-width extremely high, always greater than width. Because of the above law, width gets applied.
- Now to make sure text is hidden when the width is 0, use overflow hidden.
- To make sure the current stage name is always visible, the above styles are unset in case of current.
Last but not least the reason this is called a Thanos snap is because of Thanos philosophy that “no enough space lets snap hide them ”. Also because of the below effect:
![](https://miro.medium.com/v2/resize:fit:700/1*KhSZCVxZvpjLeB6zWMEU7A.gif)
The primary intension of this article is to introduce this fab four technique with a little tweak(max (0, negative/positive value)). The Timeline use case we had was just an example to showcase this. If you are aware of any use cases where this technique can be used, please comment below. Hope this helps someone.
I am a senior frontend developer at Pega. If you like this content please follow me to get notified