I have a Container stack with fixed height (Custom Height=70vh) and want the content I put in this stack to appear vertically centered in that space. Sure seems like that is what Align Content=Center should do, but apparently not because the content appears at the top of the space. What am I not getting?
A quick guess is that you didn’t click the checkbox for “Display as CSS Grid”.
Those spacing options rely on CSS Grid for their formatting. The settings under that check box down through Justify Content all require CSS Grid to be enabled.
1 Like
Yes, thanks I just found that out a few minutes ago. Extremely confusing - what should happen is that those alignment options should not even appear and be usable UNTIL that checkbox is marked as I’ve seen done in other stacks controls. Similarly the custom height and width controls should be hidden until their checkboxes are selected.
But then came the next issue… why does the content shrink to tiny when I select Justify Content=Center? Why not just center it? To prevent the shrinkage I end up having to leave it set to None which has the content spanning the full width, then set the custom width to something like 50vw and then put the whole mess in a Spacing stack to move it left so it’s centered. Sure would be useful to have a stack that allows you to set height and width in vh and vw and then allow centering to display the contents center in the viewport.
I’m not a stack developer, just a user. I see very few stacks act like you describe. I do not see a lot of showing/hiding of controls via check boxes, so there is likely drawbacks we’re unaware of.
I’m not seeing an issue with the content changing size when using Justify Content. I’m using a very simple example with a Container with height set to 100vw and width set to 75vw. I can use the Align Content and Justify Content to place the content anywhere within the container. Center/Center, Top/Center Center/Right, etc. The only content in my container is a Header tool. There’s likely something else going on with your setup.
My suggestion is now that you better understand how it’s working is to start with a new Container on a page, add your content via new tools and set the alignment the way you want. This way you’re back to defaults except the setting you now change. You may have made other changes trying to get things to work that are causing you issues.
1 Like
The way the Stacks API works is that it only allows us as developers to hide and show fields based on one condition. If a hidden field also needs to be conditional then that’s where things get real tricky, as Stacks doesn’t allow compound conditionals for showing / hiding controls. This is one of those cases.