In UDT playground, whatever I try, I can’t make checkbox label to cut to new line if it doesn’t fit to the container width.
HTML
<!DOCTYPE html>
<html>
<head><script src="main.js"></script></head>
<body>
<sp-body>
<form>
<div>
<sp-checkbox>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</sp-checkbox>
</div>
<div>
<sp-checkbox>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sp-checkbox>
</div>
</form>
</sp-body>
</body>
</html>
JS
const { entrypoints } = require("uxp")
entrypoints.setup({
panels: {
"vanilla": {
menuItems: [],
show: () => {},
}
}
})
Manifest
{
"id": "com.adobe.example.vanilla-ps-js",
"name": "Starter Panel",
"version": "1.0.0",
"main": "index.html",
"host": {
"app": "PS",
"minVersion": "23.0.0",
"data": {
"apiVersion": 2
}
},
"manifestVersion": 5,
"entrypoints": [
{
"type": "panel",
"id": "vanilla",
"minimumSize": {"width": 500, "height": 200},
"maximumSize": {"width": 2000, "height": 2000},
"preferredDockedSize": {"width": 500, "height": 300},
"preferredFloatingSize": {"width": 500, "height": 300},
"icons": [
{ "width": 32, "height": 32, "path": "icons/icon_D.png", "scale": [ 1, 2 ], "theme": [ "dark", "darkest" ], "species": [ "generic" ] },
{ "width": 32, "height": 32, "path": "icons/icon_N.png", "scale": [ 1, 2 ], "theme": [ "lightest", "light" ], "species": [ "generic" ] }
],
"label": {"default": "Starter Panel"}
}
],
"icons": [
{
"width": 23, "height": 23, "path": "icons/dark.png", "scale": [ 1, 2 ],
"theme": [ "darkest", "dark", "medium" ]
}, {
"width": 23, "height": 23, "path": "icons/light.png", "scale": [ 1, 2 ],
"theme": [ "lightest", "light" ]
}
]
}
Result
However, in my plugin, I managed for label to drop to new line with:
sp-checkbox {white-space: normal;}
But then it doesn’t expand and simply overlays on top of the next element
