Is there any way to collapse the width of an element similar to how you can collapse the height?
Explain in more depth on what you mean by collapse the width.
I want to know if I can close up the space an element takes up horizontally when it is hidden. You can do this vertically with the collapse height when hidden setting, which is great for things like drop down menus and secondary navigation. But I’m working on something where the layout works better with the options running across the page.
Like a transition?
No, not a transition.
Imagine you have a row of social icons like this:
In certain instances, if you want to hide one or more of these icons, it will leave a gap like this:
I want to close up that space in those instances.
Hi. In the responsive editor you would need to set the element to “hidden when patents element width is xyz”
1 Like
This doesn’t appear to work, unless I’m doing something wrong.
In your case you would need to put each icon inside of a group and the groups would need to touch each other. Apply a hiding rule for the middle group in the responsive editor. Here is an example: I colored the groups for you:
I think this is a limitation at the moment mate. It’s a common gripe and is on their to-do list but not sure when… Maybe when they release the new responsive engine and editor
Thanks, but the example you provided isn’t really what I’m looking for. I want to hide icons based not on the size of the screen, but on things related to the data. That I can do, but it leaves a blank space, which I’d like to be able to close up.
OK. It’s a shame because the layout and UX would work better horizontally, but I guess I’ll have to configure something vertically.
Thanks.
I am working on something and have a quick question. Do you need the container width to shrink or just the space to close up between the icons?
I just need to space to close up when the icon that goes in that spot is hidden.
How many icons do you have
At the moment 4.
ok let me test a couple of things and I’ll get back to you if I found a solution. There is a hope because you dont need the container width to shrink.
OK. Thanks.
I’ve dug into this extensively and written a few forum posts including this one - And it’s a terrible solution: Collapsable Width
@edward.w.douglas is technically correct - That method DOES collapse width, but it’s only based on parent width - It accepts no other logic to it. You can’t dynamically say - “If I don’t need this button, hide and collapse the width” - Which is what I think you’re wanting.
My best advice after struggling with this is to design around it. If you go the Javascript route and try to hack around it, you’ll run into other gremlins… which is why I dislike my own solution… It broke the responsive engine.
Just my 2 cents.
3 Likes
@w.fly Yes it can get messy. I came up with this but even with 4 icon it would require quite a few workflows and css. Let me add hide 2 and see if it will work.
A different approach that I’ve used is to place whatever I need in a horizontal repeating group with cells that are fixed width. Create a DB or Option Set record for each Icon and then you can use workflows to update how many icons (records) to show. That should work for you.
2 Likes