<sp-dropdown> sizing/spacing issues in PS 22.3.0

ddbell · February 17, 2021, 5:40am

On the latest pre-release 22.3.0, the sp-dropdown does not work the same as in 22.2.0. There are a few different issues depending on how they are implemented. Here are 2 examples. The first example is a flex layout. In 22.3.0 the width of the dropdown goes to minimum. I tried numerous ways to assign a width in CSS in the sp-dropdown tags, sp-menu tags and sp-menu-item tags but nothing changes it. When clicking the dropdown, these options have to fit vertically because of the lack of space.

In the second example, there is extra space on the bottom. I tried setting margins and padding to zero and also to negative for the dropdowns and also the div tags. I could not remove the extra spacing.

This image is a comparison of 22.2.0 on the left and 22.3.0 on the right for 2 different UIs.

HTML from top example

    <sp-dropdown style="display: flex; flex-direction: row; align-items: baseline; margin-top:5px; width:100%">
        <sp-label style="width: 70px;" slot="label">Print Units</sp-label>
        <sp-menu id="printUnitsPresetsInput" slot="options">
            <sp-menu-item id="inches" value="inches" selected>Inches</sp-menu-item>
            <sp-menu-item id="centimeters" value="centimeters">Centimeters</sp-menu-item>
        </sp-menu>
    </sp-dropdown>

HTML code from the bottom example

			<div style="margin-top:12px;">
				<sp-dropdown style="width:100%;">
					<sp-menu id="fileTypesInput" slot="options">
						<sp-menu-item value="All" selected>Process All Files</sp-menu-item>
						<sp-menu-item value="noRaw">Process All Except Raw</sp-menu-item>
						<sp-menu-item value="rawOnly">Process Raw Only</sp-menu-item>
					</sp-menu>
				</sp-dropdown>
			</div>
			<div style="margin-top:3px;">
				<sp-dropdown style="width:100%;">
					<sp-menu id="saveType" slot="options">
						<sp-menu-item value="jpg" selected>Save Format - JPG</sp-menu-item>
						<sp-menu-item value="tif">Save Format - TIF</sp-menu-item>
						<sp-menu-item value="png">Save Format - PNG</sp-menu-item>
						<sp-menu-item value="psd">Save Format - PSD</sp-menu-item>
					</sp-menu>
				</sp-dropdown>
			</div>
			<div style="margin-top:3px;" id="jpgQualityRow">
				<sp-dropdown style="width:100%;">
					<sp-menu id="jpgQualityInput" slot="options">
						<sp-menu-item value="12" selected>JPG Quality - 12</sp-menu-item>
						<sp-menu-item value="11">JPG Quality - 11</sp-menu-item>
						<sp-menu-item value="10">JPG Quality - 10</sp-menu-item>
						<sp-menu-item value="9">JPG Quality - 9</sp-menu-item>
						<sp-menu-item value="8">JPG Quality - 8</sp-menu-item>
						<sp-menu-item value="7">JPG Quality - 7</sp-menu-item>
						<sp-menu-item value="6">JPG Quality - 6</sp-menu-item>
						<sp-menu-item value="5">JPG Quality - 5</sp-menu-item>
						<sp-menu-item value="4">JPG Quality - 4</sp-menu-item>
						<sp-menu-item value="3">JPG Quality - 3</sp-menu-item>
						<sp-menu-item value="2">JPG Quality - 2</sp-menu-item>
						<sp-menu-item value="1">JPG Quality - 1</sp-menu-item>
						<sp-menu-item value="0">JPG Quality - 0</sp-menu-item>
					</sp-menu>
				</sp-dropdown>
			</div>

kerrishotts · February 17, 2021, 2:59pm

Thanks for the sample. I’ve forwarded it on to the team for them to look at.

ddbell · February 18, 2021, 5:59pm

Thanks for looking into it. When you get more info, can you let me know?

I have several plugins already released on my website that will be affected if 22.3 is released this way. I want to know if I need to change the UIs prior to 22.3 being released or if this will be modified before 22.3 is released.

kerrishotts · February 19, 2021, 12:20am

Will do.

I can only get the dropdowns with side labels to behave if I take the label out of the layout entirely using some absolute positioning. Should work even when fixed (and works in 22.2), but up to you if you want to use it.

sp-dropdown.side {
     --label-width: 50px;
     display: block;
     height: 32px;
     position: relative;
     margin-left: var(--label-width);
}
sp-dropdown.side sp-label[side-aligned] {
     position: absolute;
     left: calc(-1 * var(--label-width));
     height: 32px;
     line-height: 24px;
     width: var(--label-width);
}
sp-dropdown.side sp-label[side-aligned=start] {
     flex-direction: row;
}
sp-dropdown.side sp-label[side-aligned=end] {
     flex-direction: row-reverse;
}

Then:

<sp-dropdown class="side">
 <sp-label slot="label" side-aligned="start">Label:</sp-label>
 <sp-menu slot="options"> 
  <sp-menu-item>...</sp-menu-item>
 </sp-menu>
</sp-dropdown>

For the dropdowns without labels, you can try using height: 32px, or display: flex; flex-direction: column;, though I’m not clear as to why the latter works.

(Note: I have not validated this on Windows yet, just macOS at the moment.)

ddbell · February 19, 2021, 12:41am

OK thanks for the help. I’ll check the work-around for the labels. I may just go away from the side labels too as I did with 2nd UI I posted. Other than the extra spacing on the bottom those were OK. Tomorrow I’ll try what you mentioned to see if it fixes that extra bottom spacing.

AndreasResch · June 15, 2021, 3:49pm

Hello. Any updates on this? I can’t get my dropdown menus to look proper.

kerrishotts · June 15, 2021, 3:52pm

Can you share a picture & the code you’re currently using?

AndreasResch · June 15, 2021, 3:57pm

The css code is the same as ddbell used above. And it looks the same as his faulty version of the dropdown.

Like this …

I basically need a dropdown box that is as wide as the widest element in the list. If I select the narrowest entry, the longer entries of the dropdown are wrapped into two lines as well, which isn’t how it’s supposed to work out of the box, right?

Karmalakas · June 15, 2021, 4:01pm

Ps v22.4.2 and that’s what I get on com.adobe.example.html-playground

kerrishotts · June 15, 2021, 8:40pm

You’ll need to give your dropdown a minimum width to prevent the wrapping of text elements as the width of the popover is constrained to the width of the dropdown element. If it’s not got a minimum width, it can reduce beyond what makes a lot of sense. (As for the HTML Playground – an update is coming there that changes the UI significantly, so that error won’t happen in the next push.)

You can get this look:

(Narrow)

(Wide)

with this:

<div class="wrapper">
  <div class="sidebyside">
    <sp-dropdown class="side" placeholder="Select Units of Measurement">
        <sp-label value-label slot="label">Print Units</sp-label>
        <sp-menu slot="options" >
            <sp-menu-item selected>Inches</sp-menu-item>
            <sp-menu-item>Centimeters</sp-menu-item>
        </sp-menu>
    </sp-dropdown>

    <sp-dropdown class="side">
        <sp-label value-label slot="label">Quality</sp-label>
        <sp-menu id="printUnitsPresetsInput" slot="options">
            <sp-menu-item selected>Very Low</sp-menu-item>
            <sp-menu-item>Low</sp-menu-item>
            <sp-menu-item>Medium</sp-menu-item>
            <sp-menu-item>High</sp-menu-item>
            <sp-menu-item>Very High</sp-menu-item>
            <sp-menu-item>Maximum</sp-menu-item>
        </sp-menu>
    </sp-dropdown>
  </div>
  <div class="sidebyside">
    <sp-dropdown class="side">
        <sp-label value-label slot="label">Margins</sp-label>
        <sp-menu  slot="options">
            <sp-menu-item selected>Narrow</sp-menu-item>
            <sp-menu-item>Wide</sp-menu-item>
        </sp-menu>
    </sp-dropdown>
  </div>
</div>
<style>
.wrapper {
    padding: 16px;
}


.sidebyside {
    display: flex;
    flex-wrap: wrap;
}
.sidebyside sp-dropdown {
    flex: 1 1 auto;
}
sp-dropdown.side {
     margin: 4px;
     display: block;
     height: 32px;
     position: relative;
     padding-left: var(--label-width, 6em);
     min-width: 250px;
}
sp-dropdown.side sp-label {
     position: absolute;
     left: 0;
     height: 32px;
     line-height: 24px;
     justify-content: flex-end;
     width: var(--label-width, 6em);
}
sp-dropdown.side sp-label[side-aligned=start] {
     flex-direction: row;
}
sp-dropdown.side sp-label[side-aligned=end] {
     flex-direction: row-reverse;
}


</style>

AndreasResch · June 16, 2021, 1:47pm

I don’t really need any “flex-ing” for my dropdown container. But if I use the straight-forward code withouth any flex settings applied, the dropdown box still shrink, when a shorter value is selected. That’s not how select boxes behave in HTML out of the box. Why does it happen here? Am I missing something?

Here’s the code snippet …

<div class="container_batchsettings">
          <sp-label>Quality:</sp-label>
          <sp-dropdown id="input_batch_jpqquality">
            <sp-menu slot="options">
                <sp-menu-item datakey="jpgquality_low">Low</sp-menu-item>
                <sp-menu-item datakey="jpgquality_medium">Medium</sp-menu-item>
                <sp-menu-item datakey="jpgquality_high">High</sp-menu-item>
                <sp-menu-item datakey="jpgquality_veryhigh" selected>Very High</sp-menu-item>
                <sp-menu-item datakey="jpgquality_maximum">Maximum</sp-menu-item>
            </sp-menu>
        </sp-dropdown>
        </div>

ddbell · June 16, 2021, 2:31pm

Did you use a min-width in the CSS class as Kerri Shotts suggested?

UXP is not a browser and the layout will not behave the same as a browser in many cases. UXP layouts continue to evolve as well as it is brand new to Photoshop.

Karmalakas · June 16, 2021, 2:38pm

From what I understand, this wouldn’t fix an issue. The dropdown itself does not expand to the longest value, so if you have a value which takes 500px and you set min-width to 100px, it will still wrap long options to multiple lines, wouldn’t it? (sorry, ATM don’t have how to test it myself)

AndreasResch · June 16, 2021, 2:52pm

Yeah. I’ve set the min-width to “1px” but it doesn’t make any difference. The width of the dropdown menu still changes.

ddbell · June 16, 2021, 2:58pm

I haven’t tested the min-width either. It sounds like it is a bug so it doesn’t behave as it should, which is why min-width was required.

When setting min-width, it should force that as a minimum but allow it to expand longer as needed. Max-width would set a maximum and allow it to go shorter as needed. You can use both to allow a range of widths. In my case, I just used width which should have forced it to an exactly fixed width.

In any case, I switched the layout in my plugins and went away from the side label 4 months ago. So I haven’t tested this. My current layout works fine for now. When 22.5 is publicly released I will revisit my layouts. It sounds like a lot of changes are coming. Also, it sounds like the min-width bug will be fixed.

AndreasResch · June 16, 2021, 3:05pm

I don’t want to set any fixed values, as I want to keep it language-independant and can’t say how long the dropbox content would actually be.

This is really frustrating. I’ve spent hours hacking and testing select box and it still doesn’t work. Something that should take me one minute.

How can this be the default behaviour?

I’ll put development aside for a few days now to cool down. I haven’t got the patience for this any more. Maybe waiting for a few releases until the basic things work is the best option.

ddbell · June 16, 2021, 3:31pm

Did you try adding min-width?

ddbell · June 16, 2021, 3:35pm

Maybe try using a larger value then 1px. Try using it to the smallest width you want it to be.

ddbell · June 16, 2021, 3:36pm

It looks likes it worked in Kerri’s screenshots. However, I haven’t tested myself. I already went with a different layout months ago.

ddbell · June 16, 2021, 3:37pm

Or maybe try setting both min and max width to the same value if you want it a fixed width.

Topic		Replies	Views
Adjust height of <sp-dropdown>? UXP Plugin API	2	396	December 7, 2020
HTML <select> dropdown bug UXP Plugin API	6	284	February 16, 2021
Small widths for sp-textfields UXP Plugin API	8	713	November 11, 2022
My Plugin Broke With Photoshop V 22.5 UXP Plugin API	10	636	August 19, 2021
Extra 5 pixels now in <sp-slider> between the label and the slider Photoshop	3	246	August 25, 2021

<sp-dropdown> sizing/spacing issues in PS 22.3.0

Related topics