Changes in padding/margins?

Photoshop
1

Hey.

Once again after a Photoshop update I have to adapt my plugin to fix the changes that were introduced. So there go a few hours for nothing. And I can’t even tell, if the plugin will look fine back in Photoshop 2021.

So aside from the font having changed for no reason at all, suddenly some paddings or magins have changed. As you can see here, the sp-checkbox after the word watermark suddenly is lower than before, having a margin of 14px above it that I can’t remove. Any ideas, why that changed or how it can be fixed?

image
image511×289 14.2 KB

Also some my sp-radio buttons suddenly are lower as well.

image
image389×281 7.57 KB

2

Yes, I have a similar issue with native components. I decided just to keep it broken since it changes in almost every PS version. If I would adjust that then it would change again in next version. And maybe I would need to have conditional CSS based on PS version.

1 Like
3

I would appreciate any solutions for this issue.

4

What’s the DOM & CSS look like for the affected elements?

I’m assuming on the left is PS 23?

1 Like
5

The HTML (only the affected panel) looks like that.

    <!-- WATERMARK -->
    <div id="outercontainer_watermark">
      <div class="label_category"><span data-key="pnl_watermark">Watermark</span><sp-checkbox id="input_watermarkenabled" checked></sp-checkbox></div>
      <div id="panel_watermark" class="panel_category stripes">
        <div class="panel_row">
          <div style="display: flex; flex-flow: row; flex: 1;">
            <sp-button id="button_watermarkfile" class="filebutton" quiet variant="secondary" nofocus>
              <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
                <!-- <defs><style>.a {fill: #6E6E6E;}</style></defs> -->
                <!-- <title>S Search 18 N</title> -->
                <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M16.5865,15.107,12.7,11.2215A6.413,6.413,0,1,0,11.2215,12.7l3.886,3.886a1.05,1.05,0,0,0,1.479-1.479ZM3,7.5A4.5,4.5,0,1,1,7.5,12,4.5,4.5,0,0,1,3,7.5Z" />
              </svg>
            </sp-button>
            <sp-textfield id="input_watermarkfile" placeholder="" style="flex: 1 auto;" readonly textfieldfix><option id="token_watermarkfile" value=""></option></sp-textfield>
            <sp-button class="clearbutton" quiet variant="secondary" nofocus>
              <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
                <!-- <defs><style>.a {fill: #6E6E6E;}</style></defs> -->
                <!-- <title>S Close 18 N</title> -->
                <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M13.2425,3.343,9,7.586,4.7575,3.343a.5.5,0,0,0-.707,0L3.343,4.05a.5.5,0,0,0,0,.707L7.586,9,3.343,13.2425a.5.5,0,0,0,0,.707l.707.7075a.5.5,0,0,0,.707,0L9,10.414l4.2425,4.243a.5.5,0,0,0,.707,0l.7075-.707a.5.5,0,0,0,0-.707L10.414,9l4.243-4.2425a.5.5,0,0,0,0-.707L13.95,3.343a.5.5,0,0,0-.70711-.00039Z" />
              </svg>
            </sp-button>
          </div>
        </div>
        <div class="panel_row">
          <div style="display: flex; flex-flow: column; flex: 1 auto;">
            <div style="display: flex; flex-flow: row nowrap; flex: 1 auto; margin: 2px 0px 12px 0px;">
              <sp-label class="label_slider" data-key="lbl_watermarkopacity">Watermark Opacity:</sp-label>
              <sp-slider class="valueslider" style="flex: 1 auto;" variant="filled" min="0" max="100" value="100" step="5"></sp-slider>
              <sp-textfield  id="input_watermarkopacity" type="number" class="slidervalue" value="100" style="flex: 0 0 60px; margin-left: 6px; text-align: center;"></sp-textfield>
            </div>
            <div style="display: flex; flex-flow: row nowrap; flex: 1 auto;">
              <sp-label class="label_slider" data-key="lbl_watermarkborder">Border (px):</sp-label>
              <sp-slider class="valueslider" style="flex: 1 auto;" variant="filled" min="0" max="100" value="0" step="5"></sp-slider>
              <sp-textfield  id="input_watermarkborder" type="number" class="slidervalue" value="0" style="flex: 0 0 60px; margin-left: 6px; text-align: center;"></sp-textfield>
            </div>
          </div>
          <sp-radio-group id="input_watermarkposition">
            <sp-radio value="wmposition_tl"></sp-radio>
            <sp-radio value="wmposition_tm"></sp-radio>
            <sp-radio value="wmposition_tr"></sp-radio>
            <sp-radio value="wmposition_ml"></sp-radio>
            <sp-radio value="wmposition_mm"></sp-radio>
            <sp-radio value="wmposition_mr"></sp-radio>
            <sp-radio value="wmposition_bl"></sp-radio>
            <sp-radio value="wmposition_bm"></sp-radio>
            <sp-radio value="wmposition_br" checked></sp-radio>
          </sp-radio-group>
        </div>
      </div>
    </div>

And here is the relevant excerpt from the CSS file.

div.label_category {
  display: inline-flex;
  position: relative;
  top: +10px;
  left: 8px;
  height: 27px;
  padding: 0px 12px;
  border-radius: 6px;
  z-index: 1000;
  background-color: #756f67;
  margin: 0;
  color: white;
}

div.label_category span {
  padding: 3px 0px !important;
}

div.label_category sp-checkbox {
  display: inline-block;
  height: 24px;
}

sp-radio-group#input_watermarkposition {
  border: 2px solid #756f67;
  border-radius: 6px;
  display: flex;
  flex-flow: row wrap;
  flex: 0 78px;
  padding: 0px;
  margin-left: 24px;
}

sp-radio-group#input_watermarkposition sp-radio {
  width: 14px ;
  height: 14px;
  /*padding: 2px 0px 0px 1px;*/
  margin: 5px;
  background-color: red;
}
6

I think you’d see this behavior in PS 22.5 as well; the layout for controls changed slightly when the ability to specify control sizes was enabled as this brought in new metrics from the Spectrum design language. IIRC, this ended up increasing the padding around checkboxes and radio buttons to better align with Spectrum text.

Checkbox

For the checkbox, you can eliminate the mis-alignment by using align-items: baseline or align-items: middle in div.label_category. However, I’d actually suggest a different structure entirely to reduce the amount of layout you’re having to build.

If you can live with the checkbox on the left (instead of the right), you could do this instead:

<sp-checkbox class="label_category" size="s">Watermark</sp-checkbox>

with this CSS:

sp-checkbox.label_category {
  background-color: #756f67;
  padding: 0px 12px;
  border-radius: 6px;
  transform: translate(8px,50%);
  color: white;
}

This will result in:

image
image498×262 8.2 KB

Due to the transform, the size of this element is free to vary, but it’ll always remain centered on the container border.

It also means that the user can click on “Watermark” to toggle the checkbox – easier to target than the checkbox itself.

Radio Button Group

You can use a similar trick to reposition the radio buttons using transform:

sp-radio-group#input_watermarkposition sp-radio {
    /* your other styles... */
    transform: translate(0,-75%);
}

Compatibility with previous PS versions

You could add the UXP version to the document’s body tag and target it with CSS:

const regex = /([0-9]+)\.([0-9]+)\.([0-9]+)/;
const [fullVersion, major, minor, patch] = regex.exec(require("uxp").versions.uxp) || ["", 0, 0, 0];
document.body.classList.add("uxp" + major + "-" + minor);

Then, in CSS:

.uxp5-5 sp-radio-group#input_watermarkposition sp-radio {
  transform: translate(0,-75%);
}

However, the change in Spectrum controls came in UXP 5.1 (part of PS 22.5), so you may want to do this instead:

if (major === "5" && minor >= "1") {
    document.body.classList.add("spectrum-size-fixes");
}

… and target with this CSS:

.spectrum-size-fixes sp-radio-group#input_watermarkposition sp-radio {
  transform: translate(0,-75%);
}

This way you can continue supporting the fixed layout for new PS versions without breaking layout for older PS versions.

1 Like
7

I was able to fix the checkbox with some alternative flex definitions while still keeping the checkbox on the right. Works in 2021 and 2022. So that’s sorted.

The radio-buttons however are not as easy to fix. I tried to replace the spectrum version with traditional radio buttons, but they don’t seam to be supported. I appreciate your suggestion, but this is a bit too messy and I fear I will have to add more and more exceptions in the future. I rather wait for the next release to fix this issue and get it back to the way it was before. For now I will leave it like that - it’s not pretty, but it works.

8

If you use react you could try to make your own components from Div elements with full control over appearance and behavior.

1 Like
9

Unfortunately I don’t use React.

10

You don’t need to use any JS library/tool/framework but in React it is convenient due to components and their inner states.

1 Like