This is more likely to do with my coding so I would like to ask what is the best way to do this.
I like to put sp-action-buttons in a row but for some reason the latest update has forced the last button to wrap onto a different line.
What would have changed in PS 22.5 to have caused this ?
What is the best way to put buttons on a sinlgle line and to stop this from happening in future releases of Photoshop ?
Thanks
Most of the times it’s CSS flex-wrap that needs to be set or specified accordingly.
Flex… I should read up on this, CSS was never my strong point
Interesting it worked prior to the update so I wonder what changes they make to a PS update
I’m not using CSS flex-wrap and parts of my formatting is messed up too with Ps 22.5.0. I was using
<sp-body></sp-body>
to create space between elements and it seems to have increased the space between elements to the point that some items now bleed off the bottom of the plug-in. It could also be the is an issue as several of these were involved in this also. Still quite frustrating to have things that have been fixed and working for over a year all of a sudden break.
I was also using
<sp-body></sp-body>
It would be nice to know if using is a bad move and what would be a more appropriate way for future updates
My best guidance here is that you should design responsively, not to a fixed size of panel. Panels should always be resizable and your content should always adjust to reflect the size of the panel.
In this way, your plugin’s layout is more robust against potential changes in layout. Note that this is important even w/o UXP updates – macOS and Windows render fonts differently, and so what fits perfectly on one line on macOS may not do so for Windows. And OS updates can sometimes muck up rendering and layout too.
This is why flexbox layout is so useful – you can build your UI in such a way that it is adaptive to the panel size, rather than forcing a fixed panel size. It’s not the easiest thing in the world to reason about (which is why we want to add Grid layout), but it’s one of the best ways to build a UI that can adapt to its environment.
It’s not easy to build adaptive UI, granted, but it has many benefits:
Although we don’t make it a requirement that your UI is responsive for Ps (although it is for Xd), you should definitely build your UI in an adaptive manner.
Interesting because most of my panels have been of a fixed size.
Are we ok to use absolute positioning in CSS or would you advise against it @kerrishotts
Depends on how you’re using it, IMO. You can use absolute positioning in a responsive manner – flexbox isn’t the only way to be responsive. I use absolute positioning all the time when I want to pin elements to corners/edges of other elements.
For example – let’s say I want an element to be pinned to the bottom right of the panel – I can:
.pinned {
position: absolute;
right: 0;
bottom: 0;
width: 32px; height: 32px;
}
… and the element will happily float based on the width of the parent container (& eventually the panel itself). That’s a totally OK way of using absolute positioning.
With a fixed-pixel position approach, I could also have written:
.pinned {
position: absolute;
left: 288px; /* panel is always 320px wide */
bottom: 224px; /* panel is always 256px high */
width: 32px; height: 32px;
}
… but now the element isn’t really pinned to the bottom right corner – it’s targeting (288,224), not 32px offset from the bottom right corner (whatever that might be).
Another good example is using relative & absolute positioning when working with before/after pseudo–elements – totally valid. For example, if I want to emulate unordered list items with bullets, I can use some absolute position for the bullet that’s still positioned relatively with respect to everything else.
The bigger issue (in my view) is when you position everything absolutely to specific pixels (offset from the top-left corner). For some arrangements of UI, this can work, but if you move something or something needs to wrap or adjust to UI scale, etc, your UI can’t adjust easily (unless you recalculate the pixel positions yourself). This can be a problem at runtime, but also when it comes time to add a new feature to your UI w/o having to determine fresh pixel positions all the time.
So there’s no problem with using position: absolute – I use it all the time. But I try to avoid positioning UI elements to a specific pixel position unless those positions are already relative to something else.
What would be nice unless its already been done and I just haven’t seen it would be if someone could make a sample panel which is responsive with buttons aligned in a row and a column along with the css to show how to use this flex layout so we can learn and stop issues like this happening again.
Can you share a mockup of the type of layout you’re looking to have a demo for?
