I’m really hoping someone can help me with this, I’m pulling my hair out over it.
I have the following groups set up, which contain “Phases”, within each Phase, there are number of “Touchpoints”. I effectively want to display a few columns with data in, against each touchpoint.
For example, when clicking the “Expand” button on “discovery”, I want to display all the touchpoints that are assigned to it, ability to edit/delete specific touchpoint and some other useful information.
I’m completely lost now, I thought I knew how to achieve this through the use of a repeating group and “collapse when hidden/not visible on page load” but that doesn’t achieve what I want.
One thing I keep coming up against is the fact I need to remove the “fixed” container type in order to have the “collapse when hidden” option appear, but this prevents me from having flexibility on formatting the group (Unless I’m missing something).
The other thing is, I want that “+add phase” button to be pushed down whenever a new phases is added, I’ve tried various things there and had no success either.
Any help is greatly appreciated - I will buy you a coffee.
I would set this container layout to ‘row’ and ‘space-between’ initially. You’ll just need to create a couple more embedded groups for the visuals to stay as they are (you may have some already):
One group for the logo + discovery/adoption/etc. on the left
One group on the right for the touchpoints/settings/expansion icon
You could add another for the central text but it’s not necessary from a display perspective
That will give you a much more responsive starting point for the layout, as the groups will automatically be evenly spaced by the container layout above.
RE the embedded repeating group accordion, the approach you’ve described above should work just fine, what is the exact issue you’re encountering? Setting height to collapse when hidden & defining a transition should suffice. Admittedly I achieve this more manually by zeroing height and adding an overflow:hidden css rule to the element (as opposed to hiding it), since I want a greater degree of control.
With regards to your phase button moving down the page, it sounds like you may just require your repeating group being set to display all items immediately, fitting height to content. If you are using fixed elements on the page you’ll lose all dynamism/responsiveness, so I’d highly recommend getting into the habit of using the responsive controls instead (anything but fixed). You shouldn’t need to have a single fixed element present once you get the hang of it, they’re a bit janky and quite firmly legacy formatting in my eyes.
This should work perfectly, and should be rather simple… what exactly are you having trouble with?
One thing I keep coming up against is the fact I need to remove the “fixed” container type in order to have the “collapse when hidden” option appear, but this prevents me from having flexibility on formatting the group (Unless I’m missing something).
You’re definitely missing something there (although I’m not quite sure what you mean by prevents flexibility on formatting?)…
The other thing is, I want that “+add phase” button to be pushed down whenever a new phases is added, I’ve tried various things there and had no success either.
You shouldn’t need to do anything for that to happen… it’s the standard behaviour… (assuming your container elements are correctly configured).
As I said, this should be very simple… here’s an example of how I would do it:
I’m guessing this is because the parent container type is set to “fixed”. When I try changing that to column, it moves all the other groups on my page into a single column on the left hand side, and I don’t appear to be able to put them back where they should be (Screenshot of entire page for reference).
With the new responsive (non-fixed) controls, you can no longer drag elements around the page freely, except to move them between other groups or change element order etc. Positioning comes entirely from the use of groups and alignment settings.
It sounds like you need to wrap the top three groups in another group of container layout row, that way they’ll all be treated as one element with regards to the page’s column stack, retaining your horizontal alignment.
I would honestly just go through your app and make sure you knock out every fixed container that you’ve used, you’ll see much better results once you get used to the container alignment.
Thank you - I was hoping that wouldn’t be the case, being able to simply move things where you want them seems so much easier. I’ve just had a go at recreating the top bar on a new page and something as simple as putting the search box and profile/notification elements in the right place seems so complex - I’ll just go back to basics and try again.
