Are uxp panels a fixed width?

Photoshop UXP Plugin API
, , ,
1

I am trying to determine if the spacing to the side of the plugin is usable? Please see screen shot attached.

The panels width seems to be limited, the buttons expand to a point and then once the panels width has exceeded some px, the buttons no longer respond responsively or fit the newly expanded window. What am I doing wrong? or is this a feature I have to work with?

Screenshot 2024-11-05 at 14.09.19
Screenshot 2024-11-05 at 14.09.193188Ă—1002 220 KB

2

It fully depends on your CSS. Here’s a video example of my plugin (from 21-st second):

3

It’s just that blank space to the right that i can’t seem to place my content in/across etc

Any help would be much appreciated, even just being able to place the content in the right side of the panel leaving space on the left would be insightful… I’m trying to understand why at all turns i’m unable to place anything in that area let alone make use of all the space a panel has to offer.

I’ve tried applying a width of auto/specifc pixel number etc etc, any pointers would be a massive massive help

main.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

var root = document.createElement("div");
root.style.height = "100vh";
root.style.overflow = "auto";
root.style.padding = "10px 20px";
// Add an id and class
root.id = "root-div";        // Assigns an id
root.className = "root-container";     // Assigns a class

ReactDOM.render(
  <App />,
  document.body.appendChild(root)
)

The App.js just renders a bunch of sp-action-buttons

and this is the css:


.container {
    display: flex;
    flex-wrap: wrap;         

}

sp-action-button sp-picker{
    flex: 1 1 50%;           
    box-sizing: border-box;   
    padding: 10px;

    max-width: 150px;  
    white-space: nowrap;     
    overflow: hidden;         
    text-overflow: ellipsis;  

}
4

Check “Elements” section in your DevTools to see what’s the final layout and what styles are there. From what you provided, I can’t say much :man_shrugging:

5

in the uxp manifest, you should have entrypoints (your panels)

these objects can have maximum and minimum width.

there are also limitations in the types of css styles you can use in uxp, detailed here: https://developer.adobe.com/xd/uxp/uxp/reference-css/Styles/

in my experience, the way to handle responsiveness in uxp is via javascript, to take clientWidth measurements and set classnames based on whatever breakpoints, or set width inline via js

hope this helps, and good luck! :slight_smile:

1 Like
6

Thank you so much! That’s seems like its my issue, on a quick glance of my manifest I have a set min/max width, I really appreciate your response!

When i have some time to tinker I’ll check if this was my issue but it does look like its the culprit.

Cheers Gustav!