Hello,
I’ve encountered a problem in my dialog when I paste very long words in it, which are wider then the dialog is. My dialog texts are variable and can contain words which are longer than the dialog is wide.
The dialog is created programmatically but I’ve the same problem when I use an HTML file.
In this screenshot the debug feature from the UXP tool is used to display the padding:
Below is my sample code which from my opinion should work. As you can see I use the sp-heading -tag and set the text via textContent. This way the long word overlaps the padding of the dialog.
I’ve found a workaround by adding a div-tag as child and assign the text to the child’s textContent. Does anybody else encountered the problem? Why do I have to add the extra tag?
Here’s the sample to show my dialog:
showModal = async (dialogSize={width: 480, height: 240}) => {
const [dlgEl, formEl, headingEl, buttonGroupEl, footerEl] =
["dialog", "form", "sp-heading", "sp-button-group", "footer"]
.map(tag => document.createElement(tag));
[headingEl, footerEl].forEach(el => {
el.style.margin="6px";
el.style.width="calc(100% - 12px)";
});
headingEl.style.wordBreak="break-word";
headingEl.style.display="inline-block";
buttonGroupEl.style.margin="5px 8px";
buttonGroupEl.style.flexDirection="row";
formEl.setAttribute("method", "dialog");
formEl.style.width="auto"
formEl.style.height="auto"
headingEl.setAttribute("size", "XS")
headingEl.setAttribute("font-size", "large")
headingEl.textContent = "Heading text content here_s_a_very_loooong_text_which_does_not_fit_in_the_given_dialog_width"
const buttonElement = document.createElement("sp-button");
buttonElement.textContent = "OK"
buttonElement.setAttribute("variant", "cta") //warning
buttonElement.setAttribute("autofocus", "autofocus");
buttonElement.onclick = () => {
dlgEl.close("close");
}
buttonGroupEl.appendChild(buttonElement);
footerEl.appendChild(buttonGroupEl);
[headingEl, footerEl].forEach(el => formEl.appendChild(el));
dlgEl.appendChild(formEl);
document.body.appendChild(dlgEl);
const r = await dlgEl.uxpShowModal({
title: "Dialog Title",
resize: "both",
size: dialogSize
});
dlgEl.remove();
}