My goal: I’m building screen to display or update records. I use container to organize the screen and group similar fields together by topic. Containers are mainly vertical stacks but for some fields sometimes require to be displayed on the same row. For example a user and its status which can be a label or just flag represented by an icon.
Issue: Adding an horizontal stack add extra space that I can’t remove.
Steps I've taken to troubleshoot: I’ve played with container gap, margin, alignment as well as each component setting too.
Additional info: (Cloud or Self-hosted, Screenshots): Here a generic example where the extra space is visible on the user name/status row. When there are several cases in a forms it doesn’t look clean.
My first thoughts were that for the use-case you describe, a horizontal Stack component might not be the best option. You could just use a normal container and put the grouped controls next to each other on the same line.
The horizontal stack is more for when you don’t necessarily know how many items or the size of the items that will be in the group - it can become scrollable then (if it doesn’t all fit on the same row). Your use-case looks to be a standard grid layout with a known/fixed set of controls, which should work ok without a sub-container like Stack. Perhaps there is something else you had in mind apart from this example though - so let me know.
E.g.
*Note* in this example you have the labels on the left of the text-box (rather than the top) which means you will have to give the labels all a fixed pixel size so the text boxes line up properly. In this example I gave them a width of 100px.
I must say I started using mainly stack containers to get some of the automated alignment and component auto-sizing with the Fill option. But I think I can revert to grid as this seems to work for my used cases.
I am glad @Jon_Steele's suggestion worked for you!
Just wanted to add some context for anyone landing on this thread: the extra whitespace in horizontal Stacks is actually a known product limitation that our engineering team is tracking. And I have added your +1 to the ticket. We'll update this thread if a fix ships for the underlying spacing issue!
