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

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>

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

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.

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.)

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.