Perhaps because the whole thing (no matter what you append) is still inside the UXP wrapper.
This is a job for @kerrishotts, I wot.
1 Like
UI Faces plugin has a fixed footer. Maybe you should check that out.
1 Like
@PaoloBiagini – can you share a snippet where fixed positioning isn’t working as you expect? I’ll try and take a look at it this weekend.
Sure! Here it is.
In XD 22 fixed positions worked right: elements remained anchored to the bottom.
As said, it’s in XD 23 that they started to scroll.
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - NAVIGATION
var navigationContainer = document.createElement("div");
navigationContainer.style.position = "fixed";
navigationContainer.style.bottom = 43;
navigationContainer.style.display = "flex";
navigationContainer.style.flexDirection = "row";
navigationContainer.style.alignItems = "center";
navigationContainer.style.justifyContent = "center";
navigationContainer.style.margin = "0px auto 10px auto";
navigationContainer.style.width = "100%";
navigationContainer.style.height = 50;
navigationContainer.style.background = "#F7F7F7";
navigationContainer.style.borderTop = "1px solid";
navigationContainer.style.borderColor = separatorColor;
container.appendChild(navigationContainer);
var previousPageB = createButton("", "action", true);
previousPageB.style.marginRight = 10;
previousPageB.style.width = (platformIsMac()) ? 20 : 40;
previousPageB.setAttribute("title", "Previous page");
previousPageB.onclick = (e) => previousPage();
navigationContainer.appendChild(previousPageB);
var previousIcon = document.createElement("img");
previousIcon.src = "img/left.png";
previousPageB.appendChild(previousIcon);
var currentPageTF = createTextInput("", 40, false);
currentPageTF.type = "number";
currentPageTF.min = 1;
currentPageTF.setAttribute("title", "Current page");
currentPageTF.oninput = (e) => changePage(currentPageTF.value, false);
navigationContainer.appendChild(currentPageTF);
var pageCounterL = createLabel();
pageCounterL.style.textAlign = "center";
navigationContainer.appendChild(pageCounterL);
var nextPageB = createButton("", "action", true);
nextPageB.style.marginLeft = 10;
nextPageB.style.width = previousPageB.style.width;
nextPageB.setAttribute("title", "Next page");
nextPageB.onclick = (e) => nextPage();
navigationContainer.appendChild(nextPageB);
var nextIcon = document.createElement("img");
nextIcon.src = "img/right.png";
nextPageB.appendChild(nextIcon);
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - FOOTER
var footer = document.createElement("footer");
footer.style.position = "fixed";
footer.style.bottom = -8;
footer.style.width = "100%";
footer.style.justifyContent = "center";
footer.style.marginTop = 30;
// footer.style.marginBottom = -20;
footer.style.paddingBottom = 20;
footer.style.background = "#F7F7F7";
container.appendChild(footer);
var okB = createButton("Insert", "cta");
okB.id = "insertIcon";
okB.setAttribute("type", "submit");
okB.onclick = (e) => validatePanel(e);
footer.appendChild(okB);
Thank you in advance @kerrishotts.
Oooooooh…
Ok, I think we have a bug here.
The fix in XD 23, in particular, was related to the fact that position:fixed could go out-of-bounds of the plugin. Assuming no other positioned ancestor elements, elements that are fixed are positioned now based on the container (not the entire plugin panel)
Where it does fall apart is when the overall plugin height is larger than the container – fixed positioning doesn’t work there. So for now, I’d use fixed positioning only in the case of trying to adjust to the width and height of the panel for more complex layout. For example, you could have the top-level panel div have position: fixed; top: 0; left: 0; right: 0; bottom: 100px and then another div beneath it positioned at 100px from the bottom, and it’ll stay fixed to the size of the panel.
I see.
Do you think it will be solved in XD 24 so we can use real sticky elements?
Push (the last question @PaoloBiagini).