I am busy building the admin portal for a SaaS product. I have used states to show/hide groups depending on the menu items selected. For example when a user clicks on the Billing item in the vert LH side menu you then have sub options across the top of the page (Overview, History, Settings., etc…) which you can then click on to bring up that section (i.e. turns on the the selected elements visibility.
I know how to build this and don’t need help on that, but the problem I am running into is that it seems that I can only create 10 container groups on the page. When I create the 11th container group it for some reason throws off the alignment of the other groups. I have tried to debug this and tried everything from copying other group to make sure the congif is the same, to creating a new group on a cloned page. Nothing resolves the problem. Basically everything works fine if I have 10 groups and the moment I create the 11th the alignment of the other groups pushes everything to the right. If I then delete any one of the previous groups ( I have tried all of them) to bring the total number of groups down to 10 in total the alignment is fine again…this is doing my head in!
Anyone able to help?
Screenshot of menu structure
Screenshot of groups (10)
Screenshot of elements correctly aligned to the left when I only have 10 groups
Screenshot of elements somehow forced to the right alignment when I add an 11th group