Sp-radio text

Photoshop
1

Also having issues with PS 22, the sp-radio no longer aligns the text to the side correctly. I dont have any specific CSS on these so wondering how to get the text on the label to align to the right as it did in PS21?

spradio
spradio334Ă—192 4.3 KB

2

I believe this Kerri’s post should explain what’s happening

3

There seems to be no control over the size of sp-radio buttons now. I can’t get them to be less high than 48px. This limits flexibility a lot. Not sure why this decision was made. “New metrics” is fine as a default, but leave people the option open to adjust them if they want to.

4

@matakas:

Would be useful to see your HTML.

<sp-radio> that contains text inside the tag will automatically align the text correctly to the right.

<sp-radio-group>
<sp-radio>Face</sp-radio>
<sp-radio>Edge</sp-radio>
<sp-radio>Safety</sp-radio>
</sp-radio-group>

image
image482Ă—112 3.29 KB

@AndreasResch:

You can ask the radio buttons to be smaller with the size attribute (size="s"), and this will adjust everything related to the radio button down. Size small is 24px high. Size medium is 32px high. Large is 42px, and Extra Large is 48px.

You can use transform:translate(0,-25%); to offset the radio button’s top padding. (At 32px, the top padding is 8px). If you change the height, you’ll have to use a different percentage, or hard-code -8px.

For example:

<sp-radio-group style="padding: 12px">
<sp-radio class="offset">Face</sp-radio>
<sp-radio>Edge</sp-radio>
<sp-radio>Safety</sp-radio>
</sp-radio-group>

with the following CSS

sp-radio.offset {
    transform:translate(0,-8px);
    height: 24px;
}
sp-radio {
    border: 1px solid red;
}

results in this layout:

image
image482Ă—112 3.59 KB

1 Like
5

My HTML is literally your example, but there is 12 radio buttons. I’m using javascript to hide certain buttons depending on the kind of template that is opened.

<sp-radio-group>
<sp-radio id="selectFiveSide">Face</sp-radio>
<sp-radio id="selectSixSide">Edge</sp-radio>
<sp-radio id="selectFiveSide">Safety</sp-radio>
</sp-radio-group>

The buttons labels show correctly, until they are hidden and then the labels all mis-align.

the javascript just get the id and sets the display to either block or none

   var fiv = document.querySelectorAll("[id='selectFiveSide']");
   var six = document.querySelectorAll("[id='selectSixSide']");
   var thr = document.querySelectorAll("[id='selectThreeSide']");

if (templateType.value == template) {
      for (var i = 0; i < fiv.length; i++)
         fiv[i].style.display = 'block';
      for (var i = 0; i < six.length; i++)
         six[i].style.display = 'none';
      for (var i = 0; i < six.length; i++)
         thr[i].style.display = 'none';
   }
6

Hey.

Using the “size” attribute and setting it to “s” helped and the radio buttons work both in PS 2021 and PS 2022 now.

Cheers.

7

I’ve fixed the issue by making multiple groups and giving the group an ID and setting it’s display to none rather than the individual button in one big group

8

@matakus Your layout issue is down to setting a sp-radio to display: block – they don’t use block layout. Instead use display: initial or display: flex.

I’d suggest using classes instead, though, so that you don’t have to try and set the actual styles:

.hidden { display: none; }

yourSpRadioElement.classList.add("hidden"); /* hide */
yourSpRadioElement.classList.remove("hidden"); /* it's visible again */

(Also note: IDs are supposed to be unique in the document. You should just be able to use querySelector("#theId") to get the item, and you won’t need to use the for loops.)

9

Awesome, thanks for your help Kerri