I’m currently starting to work through and convert some existing pages to the version 3 code using the beta in PSUniversal. However, I’ve come across a couple bits for page arrangement that is making it frustrating. I’m not sure I understand best how to organize the code to get the desired result. I’ve looked over the example code, even have the demo site running to reference. Any input would be appreciated.
First bit is organizing a card with multiple input elements. I would like to have them show lined up vertically, instead of it attempting to put them all together on a horizontal setup.
Picture example:
Second bit, trying to setup my page grid. The first section of my page on the left has a list of expansion panels and takes up a bit. I then want two different input cards in the middle, the one referenced above and a CSV file upload section. Finally on the right, an output table of the jobs successfully running. I’m having difficulty getting the two boxes in the middle, this is what it ends up looking like.
not quite the layout i’m looking for, but your code helps me understand how i might be able to make it work better. I’ll play around with a bit, and see if I can post up some new results on it to share with others
i think maybe if there was away to set lineup of items in cards, that would be a big help.
In terms of organizing the page, I hate to say it but the UDGrid method in v2.x was much more helpful to me. Moving the items in admin mode and copying the layout to put as final config for the page. Even if that wasn’t doable, the grid system now seems to only really work on the Row concept, with columns just being implied by your code. It makes it difficult to arrange the page when you have this different sized objects.
So I made some progress on the layout. I’ll post the sample code below, but the trick was that I had to make the grid size small enough on the middle set so that it would properly align them vertically instead of horizontally. I was able to get the second card under it by tossing it into the same content scriptblock as the top card. While this works, I do think gridlayout would be immensely helpful in working with these scenarios. I also feel like the ability to set objects in cards or grid items on an axis alignment could be useful. Maybe something like -AxisAlign horizontal / vertical. That, or maybe it’s just me grasping a better understanding of the code layouts. Until you gave me the example to work from, I didn’t think to put another grid container inside one I had already established.
I also noticed this little bug, marked on the picture. The third column is part of the overall grid container for the page, yet it seems to be slightly higher on alignment.
Thanks for the feedback and glad to hear you’re having a bit more success. And like I said, we’ll get UDGridLayout back in there. It won’t make 1.2 but I’ll get it in vNext.
As for the bug with the spacing at the top, please file an issue. Seems like something we should fix.
I was working with layouts again on another page, and it’s not been going as easily as the previous example. It got me digging into the Grid component on MaterialUI’s site. I noticed under their Complex Grid example that there is a direction component in the code for grid items. It allowed the example to line up the grid items in a columned order. Don’t know if this would be workable into your existing code for UD, but I thought it worth bringing up.